How to make my image carousel loop instead of returning back

user_13573940 0
Viewed 325

I am currently working on an image carousel and I have ran into a problem. The automatic function of my slider does not work as I want it to. When the slider reaches the last image, it goes all the way back to the first image revealing the images between instead of looping back to the first. What can I add to my code to achieve that? Here is the relevant code.

HTML:

<div class="carousel-container">
    <i class="fa fa-angle-left" id="prevBtn"></i>
    <i class="fa fa-angle-right" id="nextBtn"></i>
    <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>

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; // 1000 = 1 sec
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);

Thanks in advance!

html javascript
1 Answers

Solution:

  1. Add twoClone after firstClone in HTML.
  2. Immediately after step "last → firstClone", turn off the animation and jump to slide "first". After that, turn on the animation and going the normal carousel.

HTML:

<div class="carousel-container">
    <i class="fa fa-angle-left" id="prevBtn"></i>
    <i class="fa fa-angle-right" id="nextBtn"></i>
    <div class="carousel-slide">
        <img src="./img/testpic3.jpg" alt="" title="lastClone">
        <img src="./img/testpic1.jpg" alt="" title="first">
        <img src="./img/testpic2.jpg" alt="">
        <img src="./img/testpic3.jpg" alt="" title="last">
        <img src="./img/testpic1.jpg" alt="" title="firstClone">
        <img src="./img/testpic2.jpg" alt="" title="twoClone">
    </div>
</div>

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;
let durationAnimation = 400; // ms
let activeAnimation = "transform " + durationAnimation + "ms ease-in-out";
const size = carouselImages[0].clientWidth;
const updateSlideTransformX = () => {
  carouselSlide.style.transform = "translateX(" + -size * counter + "px)";
};
const changeActiveAnimation = off => {
  carouselSlide.style.transition = off === false ? "" : activeAnimation;
};

updateSlideTransformX();

let interval = 1000; // 1000 * 3 sec
setInterval(function() {
  // enable animation
  if (counter === 1) changeActiveAnimation()
  
  // to next slide
  counter++;
  updateSlideTransformX();

  if (counter >= carouselImages.length - 2) {
    counter = 1;
    setTimeout(() => {
      // disable animation & jump to slide 1
      changeActiveAnimation(false);
      updateSlideTransformX();
    }, durationAnimation);
  }
}, interval);

Online sandbox & demo.

́

Additional solution — back-and-forth carousel.
Online sandbox & demo.

user_16691650
Related