diff --git a/background-slider/index.html b/background-slider/index.html new file mode 100644 index 0000000..1752bc7 --- /dev/null +++ b/background-slider/index.html @@ -0,0 +1,61 @@ + + + + + + + + Background Slider + + +
+
+
+ +
+ +
+ +
+ + + + +
+ + + diff --git a/background-slider/script.js b/background-slider/script.js new file mode 100644 index 0000000..a15f328 --- /dev/null +++ b/background-slider/script.js @@ -0,0 +1,40 @@ +const body = document.body +const slides = document.querySelectorAll('.slide') +const leftBtn = document.getElementById('left') +const rightBtn = document.getElementById('right') + +let activeSlide = 0 + +rightBtn.addEventListener('click', () => { + activeSlide++ + + if (activeSlide > slides.length - 1) { + activeSlide = 0 + } + + setBgToBody() + setActiveSlide() +}) + +leftBtn.addEventListener('click', () => { + activeSlide-- + + if (activeSlide < 0) { + activeSlide = slides.length - 1 + } + + setBgToBody() + setActiveSlide() +}) + +setBgToBody() + +function setBgToBody() { + body.style.backgroundImage = slides[activeSlide].style.backgroundImage +} + +function setActiveSlide() { + slides.forEach((slide) => slide.classList.remove('active')) + + slides[activeSlide].classList.add('active') +} diff --git a/background-slider/style.css b/background-slider/style.css new file mode 100644 index 0000000..8e46937 --- /dev/null +++ b/background-slider/style.css @@ -0,0 +1,79 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); + +* { + box-sizing: border-box; +} + +body { + font-family: 'Roboto', sans-serif; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + overflow: hidden; + margin: 0; + background-position: center center; + background-size: cover; + transition: 0.4s; +} + +body::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100vh; + background-color: rgba(0, 0, 0, 0.7); + z-index: -1; +} + +.slider-container { + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); + height: 70vh; + width: 70vw; + position: relative; + overflow: hidden; +} + +.slide { + opacity: 0; + height: 100vh; + width: 100vw; + background-position: center center; + background-size: cover; + position: absolute; + top: -15vh; + left: -15vw; + transition: 0.4s ease; + z-index: 1; +} + +.slide.active { + opacity: 1; +} + +.arrow { + position: fixed; + background-color: transparent; + color: #fff; + padding: 20px; + font-size: 30px; + border: 2px solid orange; + top: 50%; + transform: translateY(-50%); + cursor: pointer; +} + +.arrow:focus { + outline: 0; +} + +.left-arrow { + left: calc(15vw - 65px); +} + +.right-arrow { + right: calc(15vw - 65px); +}