Click here to Skip to main content
14,698,201 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I am currently attempting to create an image carousel for a website and I have ran intor a problem. The carousel does not loop, instead, when it reaches the last image it slides back the the first image revealing the images in between. I want it to loop back to the first one without sliding all the way back.

HTML:
<pre> ...<div class="carousel-container">
    
    
    <div class="carousel-slide">
        <img src="./img/testpic3.jpg" id="lastClone" alt="">
        <img src="./img/testpic1.jpg" alt="">
        <img src="./img/testpic2.jpg" alt="">
        <img src="./img/testpic3.jpg" alt="">
        <img src="./img/testpic1.jpg" id="firstClone" alt="">
    </div>
</div>


CSS
.carousel-container {
     width: 70%;
     max-height: 800px;
     margin: auto;
     margin-top: 1%;
     overflow: hidden;
     border: 5px solid white;
 }
 
 .carousel-slide {
     display: flex;
     width: 100%;
     height: 400px;
 }
 
 #prevBtn {
     position: absolute;
     top: 45%;
     z-index: 10;
     left: 20%;
     font-size: 50px;
     color: white;
     opacity: 0.5;
     cursor: pointer;
 }
 
 #nextBtn {
     position: absolute;
     top: 45%;
     z-index: 10;
     right: 20%;
     font-size: 50px;
     color: white;
     opacity: 0.5;
     cursor: pointer;
 }

JavaScript:
const carouselSlide = document.querySelector('.carousel-slide');
const carouselImages = document.querySelectorAll('.carousel-slide img');


const prevBtn = document.querySelector('#prevBtn');
const nextBtn = document.querySelector('#nextBtn');


let counter = 1;
const size = carouselImages[0].clientWidth;

carouselSlide.style.transform = 'translateX(' + (-carouselImages[0].clientWidth * counter) + 'px)';

var interval = 3000;
setInterval(function() {
    var offset = counter % (carouselImages.length - 2);
    carouselSlide.style.transition = "transform 0.4s ease-in-out";
    carouselSlide.style.transform = 'translateX(' + (-carouselImages[0].clientWidth * counter) + 'px)';
    counter++;


    if (offset == 0) counter = 1; // to reset counter so next and prev button should work 

}, interval);


What I have tried:

I have tried adding a counter id which I'm absolutely sure is wrong

var interval = 3000;
setInterval(function() {
    var offset = counter % (carouselImages.length - 2);
    carouselImages[counter].id === 'firstClone';
    carouselSlide.style.transition = "transform 0.4s ease-in-out";
    carouselSlide.style.transform = 'translateX(' + (-carouselImages[0].clientWidth * counter) + 'px)';
    counter++;


    if (offset == 0) counter = 1; // to reset counter so next and prev button should work 

}, interval);
Posted
Updated 19-Jun-20 13:04pm

1 solution

Hi,

yeah, Length-2 won't cut it.


if you need a counter that goes 0, 1, 2, ... N-1, 0, 1, 2 etc simply use:
counter=(counter+1)%N;

it clearly increments/wraps and stays in the interval [0, N-1].


If you would need a counter that goes 1, 2, ... N, 1, 2 (I don't expect you would need this) then use:
counter=(counter%N)+1;

which also increments/wraps and stays in the interval [1, N].


BTW: using a list of images with duplicates makes debugging somewhat more difficult; you should use a simple list of images that you can recognize right away.


Why don't you have a look at something that already works?
Carousel · Bootstrap[^] is an example, and you can see all of its code using "View Source" or whatever the command is called on your browser.

:)
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900