Как сделать мою карусель изображений l oop вместо возврата назад

Question

В настоящее время я работаю над каруселью изображений и столкнулся с проблемой. Автоматическая функция c моего слайдера не работает так, как я хочу. Когда ползунок достигает последнего изображения, он полностью возвращается к первому изображению, показывая изображения между ними, вместо того, чтобы возвращаться к первому. Что я могу добавить в свой код для этого? Вот соответствующий код.

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);

Заранее спасибо!

Answer 1

Решение:

1. Добавить twoClone после firstClone в HTML.
2. Сразу после шага «last → firstClone» выключите анимацию и прыгайте скользить «первым». После этого включаем анимацию и запускаем обычную карусель.

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);

Онлайн-песочница и демонстрация .

́

Дополнительное решение - карусель вперед-назад. Онлайн-песочница и демонстрация .