如何在轮播的第一个幻灯片和最后一个幻灯片之间添加平滑过渡? [英] How to add smooth transition between first and last slide of a carousel?

问题描述

这有点难以解释，所以我为此做了此codepen 任何参考.我正在尝试使用香草JavaScript克隆Bootstrap轮播，我在幻灯片之间添加了过渡效果，这对第一张幻灯片和最后一张幻灯片之间存在的所有幻灯片都非常有效，但是当我单击上一个按钮从第一张幻灯片转到最后一张幻灯片或单击下一个按钮从最后一张幻灯片到第一张幻灯片，这种过渡很奇怪，它会沿着它们之间的所有其他幻灯片行进.

It is a bit hard to explain so I made this codepen for any reference. I am trying to clone Bootstrap carousel using vanilla JavaScript, I added transition between slides which works nice for all slides exists between first and last slide, but as I click previous button to go from first slide to last slide or clicking next button to go from last slide to first slide this transition behaves weird it travels along all other slides in between.

这是我使用的html:

This is the html I use:

   <div class="carousel-container">
    <div class="carousel-slide">
      <img src="imgs/pc1(1).jpg" class="firstSlide" alt="">
      <img src="imgs/pc1(2).jpg" alt="">
      <img src="imgs/pc1(3).jpg" class="lastSlide" alt="">
    </div>
  </div>
  <button id="prevBtn">Prev</button>
  <button id="nextBtn">Next</button>

和JavaScript:

and the JavaScript:

const carousel_slide = document.querySelector(".carousel-slide");
const carousel_images = document.querySelectorAll(".carousel-slide img");
const prev_btn = document.querySelector("#prevBtn");
const next_btn = document.querySelector("#nextBtn");

let counter = 0;
let size = carousel_images[0].clientWidth;

next_btn.addEventListener("click", () => {
  carousel_slide.style.transition = "all 0.3s ease-in-out";
  counter++;
  if (counter >= carousel_images.length) {
    counter = -1;
    counter++;
  }
  carousel_slide.style.transform = `translateX(${-size * counter}px)`;
});

prev_btn.addEventListener("click", () => {
  carousel_slide.style.transition = "all 0.3s ease-in-out";
  counter--;
  if (counter < 0) {
    counter = carousel_images.length - 2;
    counter++;
  }
  carousel_slide.style.transform = `translateX(${-size * counter}px)`;
});

请帮助我解决该轮播的这些最终幻灯片之间的过渡问题?谢谢

Please help me solve this transition problem between these ending slides of this carousel? Thank you

推荐答案

首先，您需要复制第一张幻灯片并插入到末尾，然后复制最后一张幻灯片并插入到起始处:

First you duplicate the first slide and insert in the end, and duplicate the last slide and insert in the beginning:

var lastSlide = carousel_images[slidecount - 1].outerHTML;
var firstSlide = carousel_images[0].outerHTML;
carousel_slide.insertAdjacentHTML('afterbegin', lastSlide);
carousel_slide.insertAdjacentHTML('beforeend', firstSlide);
// Shift to the second slide:
carousel_slide.style.transform = `translateX(${-size}px)`;

当您移至第一张幻灯片(最后一张的副本)之前的幻灯片时，您等待动画结束，然后静默地移至最后一张幻灯片:

When you move to the slide before the first (a copy of the last), you wait for the animation to end, and silently shift to the last:

if (counter < 0) {
  setTimeout(() => {
    counter = carousel_images.length - 1;
    carousel_slide.style.transition = "none";
    carousel_slide.style.transform = `translateX(${-size * (counter + 1)}px)`;
  }, 300);
}

当您移至最后一张幻灯片(第一张幻灯片的副本)之后的幻灯片时，您会默默地移至第一张幻灯片:

And when you move to the slide after the last (a copy of the first), you silently shift to the first:

if (counter >= carousel_images.length) {
  setTimeout(() => {
    counter = 0;
    carousel_slide.style.transition = "none";
    carousel_slide.style.transform = `translateX(${-size}px)`;
  }, 300);
}

正在运行的演示: https://codepen.io/bortao/pen/MWwOVbd

这篇关于如何在轮播的第一个幻灯片和最后一个幻灯片之间添加平滑过渡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！