使用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();
});
}