Animasi penukaran karusel CSS - Limpahan Tindanan

Question

Seperti yang ditunjukkan dalam gambar

Animasi yang ditulis dalam JS, jika kesan peralihan ditetapkan, situasi seperti ini akan berlaku Bagaimana JS boleh mengubah keadaan ini?

function moveSlide() {
  var slides = $('.slide');
  
  // for (var i = 0; i < slides.length; i++) {
    slides.forEach(function(item) {
      var leftValue = parseInt(item.style.left);

      if (leftValue == -100) {
        leftValue = 100;
        item.style.left = leftValue + '%';
      }else if(leftValue == 100 || leftValue == 0){
        leftValue -= 100;
        item.style.left = leftValue + '%';
      }
    }, this);

Answer 1

1.leftValue=0 >> leftValue -=100 >> leftValue=-100
2.leftValue=-100 >> leftValue = 100
3.leftValue=100 >> leftValue -=100 >> leftValue=-100
Hanya dua nilai nilai kiri anda yang berubah. Memandangkan anda menggunakan animasi peralihan, adalah disyorkan untuk menggunakan animate();