Как заставить мою автоматическую c карусель изображений l oop вернуться к первому изображению без экспонирования второго

Question

В настоящее время я работаю над каруселью изображений и, похоже, столкнулся с проблемой. Карусель (есть три изображения) хорошо работает автоматически, но вместо того, чтобы возвращаться к первому изображению, она полностью возвращается к первому, экспонируя второе изображение на короткое время. Как я могу заставить карусель сделать полный l oop без экспонирования второго изображения в процессе? Вот мой код.

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>

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

nextBtn.addEventListener('click', () => {
    if (counter >= carouselImages.length - 1) return;
    carouselSlide.style.transition = "transform 0.4s ease-in-out";
    counter++;
    carouselSlide.style.transform = 'translateX(' + (-carouselImages[0].clientWidth * counter) + 'px)';
    // console.log(counter);

});
prevBtn.addEventListener('click', () => {
    if (counter <= 0) return;
    carouselSlide.style.transition = "transform 0.4s ease-in-out";
    counter--;
    carouselSlide.style.transform = 'translateX(' + (-carouselImages[0].clientWidth * counter) + 'px)';
    // console.log(counter);
});



carouselSlide.addEventListener('transitionend', () => {
    console.log(carouselImages[counter]);
    if (carouselImages[counter].id === 'lastClone') {
        carouselSlide.style.transition = "none";
        counter = carouselImages.length - 2;
        carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';

    }
    if (carouselImages[counter].id === 'firstClone') {
        carouselSlide.style.transition = "none";
        counter = carouselImages.length - counter;
        carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
    }

});

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

nextBtn.addEventListener('click', () => {
if (counter >= carouselImages.length - 1) return;
carouselSlide.style.transition = "transform 0.4s ease-in-out";
carouselSlide.style.transform = 'translateX(' + (-carouselImages[0].clientWidth * counter) + 'px)';
// console.log(counter);

});
prevBtn.addEventListener('click', () => {
if (counter <= 0) return;
carouselSlide.style.transition = "transform 0.4s ease-in-out";
counter--;
//carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
carouselSlide.style.transform = 'translateX(' + (-carouselImages[0].clientWidth * counter) + 'px)';
// console.log(counter);
});



carouselSlide.addEventListener('transitionend', () => {
console.log(carouselImages[counter]);
if (carouselImages[counter].id === 'lastClone') {
    carouselSlide.style.transition = "none";
    counter = carouselImages.length - 2;
    carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
}
if (carouselImages[counter].id === 'firstClone') {
    carouselSlide.style.transition = "none";
    counter = carouselImages.length - counter;
    carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
}

});

Спасибо!

Answer 1

Если честно, ваши коды выглядят сложными. Вы можете просто использовать это.

<div id="demo" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>

  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="la.jpg" alt="Los Angeles" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="chicago.jpg" alt="Chicago" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="ny.jpg" alt="New York" width="1100" height="500">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

При этом ваша карусель будет oop каждый раз, когда достигнет конца вашей карусели. Или вы можете посмотреть пример здесь .