刷卡+ AOS-单击分页圈,启动AOS动画

时间:2020-03-24 02:27:18

标签: javascript jquery swiper

使用Swiper滑块插件。现在,我们的客户需要一些滑动动画。我们为每张幻灯片使用2张图像。第一张图片必须向右翻转。第二张图像向左翻转。

我的代码在加载时工作正常。但是,当我单击分页圆圈时,幻灯片正在移动。但是,AOS动画无法启动。当我使用上一个或下一个箭头时,AOS动画效果很好。但是,根据我们的设计,我们需要隐藏上一个/下一个箭头。

当用户单击分页圆圈,必须启动AOS动画时,有人可以指导我解决此问题。

谢谢

if ($(element).find('.swiper-slide').length > 1){
  let swiper;
  swiper = new Swiper( $(element), {
    init: false,
    loop: true,
    slidesPerView: 1,
    autoplay: autoplayOpts,
    pagination: {
      type: 'bullets',
      el: $(element).find('.swiper-pagination'),
      clickable: true,
      renderBullet: function (index, className) {
        var thumbnail = ( typeof slides.eq(index).data('thumbnail') != 'undefined' ) ? '<img class="img-fluid" src="' + slides.eq(index).data('thumbnail') + '">' : '';
        return '<span class="' + className + '"> ' + thumbnail + ' </span>';
      },
      navigation: {
        nextEl: $(element).find('.swiper-button-next'),
        prevEl: $(element).find('.swiper-button-prev'),
      },
      on: {
        slideChangeTransitionStart: function () {
          AOS.init();
        },
        slideChangeTransitionEnd: function () {
          AOS.init();
        }
      }
    }
  });
  $(document).ready(() => {
    swiper.init();
    AOS.init();
  });
}

0 个答案:

没有答案