simple infinite carousel, an extremely small, easy-to-use, and infinitely repetitive circular image slider created with regular JavaScript and CSS.
infinite image slider, css infinite carousel, infinite carousel javascript, infinite horizontal scroll, autoplay multi image slider, image slider with scrollbar
How to make use of it:
1. Add carousel items to the webpage.
<div class="carousel-wrapper"> <div class="carousel"> <button id="carouselPreviousSlideButton" class="carousel__button carousel__button--left"> // Add Image Here </button> <div class="carousel__track-container"> <ul id="track" class="carousel__track"> <li class="carousel__slide current-slide"> // Add Image Here </li> <li class="carousel__slide"> // Add Image Here </li> <li class="carousel__slide"> // Add Image Here </li> <li class="carousel__slide"> // Add Image Here </li> <li class="carousel__slide"> // Add Image Here </li> </ul> </div> <button id="carouselNextSlideButton" class="carousel__button carousel__button--right"> // Add Image Here </button> <div id="carouselNav" class="carousel__nav"> <button class="carousel__indicator current-slide"></button> <button class="carousel__indicator"></button> <button class="carousel__indicator"></button> <button class="carousel__indicator"></button> <button class="carousel__indicator"></button> </div> </div> </div>
2. The core CSS styles for the carousel.
.carouse-wrapper { max-height: 501px; } .carousel { height: 501px; margin: 0 auto; position: relative; max-width: 751px; } .carousel__image { height: 100%; object-fit: cover; width: 100%; } .carousel__track-container { background-color: gray; height: 100%; position: relative; overflow: hidden; } .carousel__track { list-style: none; margin: 0; padding: 0; position: relative; height: 100%; transition: transform 400ms ease; } .carousel__slide { bottom: 0; position: absolute; top: 0; width: 100%; }
3. The needed CSS styles for the carousel controls.
.carousel__button { cursor: pointer; top: 50%; transform: translateY(-50%); position: absolute; background-color: rgba(255, 255, 255, 0.75); border: unset; padding: 0; z-index: 100; border-radius: 50%; padding: 7px; outline: none; } .carousel__button--right { right: 10px; } .carousel__button--left { left: 10px; } .carousel__button img { width: 20px; height: 20px; display: block; } .carousel__nav { display: flex; justify-content: center; margin-top: 16px; } .carousel__indicator { border: unset; border-radius: 50%; cursor: pointer; width: 10px; height: 10px; background-color: rgb(182, 182, 182, 0.7); padding: 0; margin: 0 5px; outline: none; } .carousel__indicator.current-slide { background-color: rgba(0, 0, 0, 0.7); }
4. Enable the carousel by including the next JavaScript snippets to the web page.
const track = document.getElementById('track'), slides = Array.from(track.children), nextSlideButton = document.getElementById('carouselNextSlideButton'), previousSlideButton = document.getElementById('carouselPreviousSlideButton'), carouselNav = document.getElementById('carouselNav'), carouselNavDots = Array.from(carouselNav.children); window.addEventListener('resize', setSlideImagePosition) // position slide images parallel to one another horizontally function setSlideImagePosition() { slideXDimension = slides[0].getBoundingClientRect().width; for (let index = 0; index < slides.length; index++) { slides[index].style.left = `${index * slideXDimension}px` } const currentSlide = track.querySelector('.current-slide'); track.style.transform = `translateX(-${currentSlide.style.left})` } setSlideImagePosition(); // current slide is moved to the left when next button is clicked function moveSlide(track, currentSlide, targetSlide) { track.style.transform = `translateX(-${targetSlide.style.left})`; currentSlide.classList.remove('current-slide'); targetSlide.classList.add('current-slide'); } nextSlideButton.addEventListener('click', function () { const currentSlide = track.querySelector('.current-slide'); const targetSlide = currentSlide.nextElementSibling; const currentDot = carouselNav.querySelector('.current-slide'); const nextDot = currentDot.nextElementSibling; if (targetSlide) { moveSlide(track, currentSlide, targetSlide) updateCarouselDots(currentDot, nextDot) } else { const targetSlide = slides[0]; const nextDot = carouselNavDots[0] moveSlide(track, currentSlide, targetSlide) updateCarouselDots(currentDot, nextDot) } }) previousSlideButton.addEventListener('click', function () { const currentSlide = track.querySelector('.current-slide'); const targetSlide = currentSlide.previousElementSibling; const currentDot = carouselNav.querySelector('.current-slide'); const nextDot = currentDot.previousElementSibling; if (targetSlide) { moveSlide(track, currentSlide, targetSlide) updateCarouselDots(currentDot, nextDot) } else { const targetSlide = slides[slides.length - 1]; const nextDot = carouselNavDots[carouselNavDots.length - 1] moveSlide(track, currentSlide, targetSlide) updateCarouselDots(currentDot, nextDot) } }) carouselNav.addEventListener('click', function (event) { targetDot = event.target.closest('button'); console.log(targetDot) if (!targetDot) { return } const currentSlide = track.querySelector('.current-slide'), currentDot = carouselNav.querySelector('.current-slide'), targetIndex = carouselNavDots.findIndex(dot => dot === targetDot), targetSlide = slides[targetIndex]; moveSlide(track, currentSlide, targetSlide); updateCarouselDots(currentDot, targetDot); }) function updateCarouselDots(currentDot, targetDot) { currentDot.classList.remove('current-slide'); targetDot.classList.add('current-slide'); } slides.forEach(setSlideImagePosition)
Minimal Infinite Carousel In JavaScript, simple infinite carousel Plugin/Github
See Demo And Download
Official Website(judzelicor): Click Here
This superior jQuery/javascript plugin is developed by judzelicor. For extra Advanced Usages, please go to the official website.
Be First to Comment