├── README.md ├── app.js ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # class_image_slider 2 | 3 | [Live Demo](https://coderkhalide.github.io/class_image_slider) 4 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | const slides = document.querySelectorAll('.slide') 2 | const previous = document.querySelector('.previous') 3 | const next = document.querySelector('.next') 4 | let currentSlide = 0 5 | 6 | const changeSlider = () => { 7 | slides.forEach((slide, index) => { 8 | if(slide.classList.contains('active')) currentSlide = index 9 | }) 10 | slides[currentSlide].classList.remove('active') 11 | if(currentSlide === (slides.length - 1)) slides[0].classList.add('active') 12 | else slides[currentSlide + 1].classList.add('active') 13 | } 14 | 15 | let interval = setInterval(changeSlider, 5000) 16 | 17 | const nextSlider = () => { 18 | clearInterval(interval) 19 | slides[currentSlide].classList.remove('active') 20 | 21 | if(currentSlide === (slides.length - 1)) { 22 | slides[0].classList.add('active') 23 | currentSlide = 0 24 | } 25 | else { 26 | slides[currentSlide + 1].classList.add('active') 27 | currentSlide = currentSlide + 1 28 | } 29 | interval = setInterval(changeSlider, 5000) 30 | } 31 | 32 | const previousSlider = () => { 33 | clearInterval(interval) 34 | slides[currentSlide].classList.remove('active') 35 | 36 | if(currentSlide === 0) { 37 | slides[slides.length - 1].classList.add('active') 38 | currentSlide = slides.length - 1 39 | } 40 | else { 41 | slides[currentSlide - 1].classList.add('active') 42 | currentSlide = currentSlide - 1 43 | } 44 | interval = setInterval(changeSlider, 5000) 45 | } 46 | 47 | previous.addEventListener('click', previousSlider) 48 | next.addEventListener('click', nextSlider) -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Slider 8 | 9 | 10 | 11 |
12 |
13 | 14 | 15 | 16 |
17 | 18 |
19 |
20 | 21 |
22 |
23 | 24 |
25 |
26 | 27 |
28 |
29 |
30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | .slider{ 2 | width: 100%; 3 | height: 100vh; 4 | display: flex; 5 | align-items: center; 6 | justify-content: center; 7 | } 8 | .slider_container{ 9 | width: 100%; 10 | max-width: 1100px; 11 | height: 600px; 12 | /* overflow: hidden; */ 13 | position: relative; 14 | } 15 | .slide { 16 | width: 100%; 17 | height: 100%; 18 | position: absolute; 19 | top: 0; 20 | opacity: 0; 21 | transition: all 1.5; 22 | -webkit-transition: all 1.5; 23 | -moz-transition: all 1.5; 24 | -ms-transition: all 1.5; 25 | -o-transition: all 1.5; 26 | } 27 | .slide img{ 28 | width: 100%; 29 | height: 100%; 30 | object-fit: cover; 31 | border-radius: 20px; 32 | -webkit-border-radius: 20px; 33 | -moz-border-radius: 20px; 34 | -ms-border-radius: 20px; 35 | -o-border-radius: 20px; 36 | } 37 | .active{ 38 | opacity: 1; 39 | } 40 | .previous { 41 | position: absolute; 42 | top: 50%; 43 | left: 15px; 44 | z-index: 99; 45 | } 46 | .next { 47 | position: absolute; 48 | top: 50%; 49 | right: 15px; 50 | z-index: 99; 51 | } --------------------------------------------------------------------------------