Question

我正在尝试将动画（动画CSS）连接到Swiper滑块。动画有效，但是有一个问题。

当您更改幻灯片时，它会向右或向左滚动，我需要将其删除，以便幻灯片消失并在动画中显示在适当的位置。

我不知道我做得如何正确，我对JS也不了解。请看，谁能知道如何停止滚动以便一切正常。

codepen.io/anakin-skywalker94/pen/RmWxbE

谢谢！

Answer 1

这是您要寻找的吗？

  var swiper = new Swiper('.swiper-container', { 
    effect: 'fade',
      fadeEffect: {
    crossFade: true
  },
  pagination: {
    el: '.swiper-pagination',
    type: 'fraction',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  direction: 'horizontal',
    loop: true,
    speed: 1500,
    slidesPerView: 1,
    spaceBetween: 0,
    mousewheel: false,
    //slidePrevClass: 'swiper-slide-prev animated rotateOut',
    //slideActiveClass: 'swiper-slide-active animated bounce',
    //slideNextClass: 'swiper-slide-next animated rotateOut',   
    pagination: {
    el: '.swiper-pagination',
      type: 'custom',
      clickable: true,
      renderCustom: function (swiper, current, total) {
        function numberAppend(d) { return (d < 10) ? '0' + d.toString() : d.toString(); }
          return '<span>' + numberAppend(current) + '</span>' + ' <span></span> ' + '<span>' + numberAppend(total) + '</span>'; 
         }
       },
    });

我基本上已经更新了您的js以使用淡入淡出效果，并删除了一些动画。

滑动滑块+动画CSS

1 个答案: