How to make my image carousel loop

Question

0.00/5 (No votes)

See more:

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:

HTML

<pre> ...<div class="carousel-container">
    
    ^__i class="fa fa-angle-right" id="nextBtn">
    <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:

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

JavaScript

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 19-Jun-20 9:56am

Skantzy

Updated 19-Jun-20 12:04pm

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Luc Pattyn · Answer 1 · 2020-06-19T12:05:00

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.

:)