diff --git a/my code/18-background-slider/index.html b/my code/18-background-slider/index.html new file mode 100644 index 0000000..bf48f62 --- /dev/null +++ b/my code/18-background-slider/index.html @@ -0,0 +1,39 @@ + + + + + + + + 18 background slider + + + + + + + +
+
+ + +
+ +
+ +
+ +
+
+ + + + + \ No newline at end of file diff --git a/my code/18-background-slider/script.js b/my code/18-background-slider/script.js new file mode 100644 index 0000000..ec48e58 --- /dev/null +++ b/my code/18-background-slider/script.js @@ -0,0 +1,41 @@ +const wrapper = document.getElementById("wrapper"); +const img = document.getElementById("img"); + +const images = [ + "https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80", + "https://images.unsplash.com/photo-1511593358241-7eea1f3c84e5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1934&q=80", + "https://images.unsplash.com/photo-1495467033336-2effd8753d51?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80", + "https://images.unsplash.com/photo-1522735338363-cc7313be0ae0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2689&q=80", + "https://images.unsplash.com/photo-1559087867-ce4c91325525?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80", +]; + +let currentImg = 0; + +function imageChanger() { + wrapper.style.backgroundImage = `url('${images[currentImg]}')`; + + img.style.opacity = 0; + img.src = images[currentImg]; + img.style.opacity = 1; +} + +const leftArrow = document.getElementById("left"); +const rightArrow = document.getElementById("right"); + +leftArrow.addEventListener("click", () => { + if (currentImg === 0) { + currentImg = 4; + } else { + currentImg--; + } + imageChanger(); +}); + +rightArrow.addEventListener("click", () => { + if (currentImg === 4) { + currentImg = 0; + } else { + currentImg++; + } + imageChanger(); +}); diff --git a/my code/18-background-slider/style.css b/my code/18-background-slider/style.css new file mode 100644 index 0000000..f8e741a --- /dev/null +++ b/my code/18-background-slider/style.css @@ -0,0 +1,63 @@ +* { + margin: 0; + padding: 0; +} + +div#wrapper { + height: 100vh; + width: 100vw; + display: flex; + justify-content: center; + align-items: center; + background-image: url("https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80"); + background-size: cover; + background-position: center; + position: relative; + transition: background-image 0.3s ease-in; +} + +.bg { + width: 100vw; + height: 100vh; + position: absolute; + top: 0; + left: 0; + background: rgba(0, 0, 0, 0.8); +} +.container { + display: flex; + justify-content: center; + align-items: center; + z-index: 3; +} + +.arrow { + background: transparent; + border: 2px solid orange; + padding: 15px; + color: #fff; + font-size: 25px; +} + +#right { + border-left: unset; +} + +#left { + border-right: unset; +} + +#slide { + width: calc(100vw * 0.8); + height: calc(100vh * 0.8); + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); +} + +#slide img { + height: 100vh; + transition: opacity 0.3s ease-in; +}