如何解决如何控制一个雨刷器和另一个雨刷器的自动播放?
我有一个雨刷器,在第三张幻灯片上有另一个雨刷器,具有自动播放功能。我的目标是在看到Swiper1的第三个滑块之前,Swiper2不会自动播放。并且当看不到Swiper1的第三个滑块时,Swiper2的自动播放就会停止。
具有有效幻灯片定义的Swiper1
$(document).ready(function () {
if ($(window).width() >= 1000) {
$('.first__wrapper').show(1500);
if (!/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {
$('.second__desc').addClass('is-hide');
$('.slider-main__desc').addClass('is-hide');
$('.third__title ').addClass('is-hide');
$('.five__wrapper').addClass('is-hide');
if ($('.main-scroll').hasClass('main--index')) {
$('.main-scroll').addClass('swiper-container');
$('#pagescroll').addClass('swiper-wrapper');
var mySwiper = new Swiper('.main-scroll',{
slidesPerView: 1,mousewheel: {
eventsTarged: '.main',releaSEOnEdges: true,},speed: 1000,navigation: {
nextEl: '.scroll__btn--next',prevEl: '.scroll__btn--prev',scrollbar: {
el: '.scroll__body',draggable: true,dragSize: 50,});
mySwiper.on('slideChange',function () {
var activeSlideIndex = mySwiper.activeIndex;
console.log(activeSlideIndex);
if (activeSlideIndex == 2) {
console.log('this is third slide');
}
});
}
}
}
});
雨刷2
$(document).ready(function () {
function main_swiper() {
new Swiper('.slider-main',{
fadeEffect: {
crossFade: true
},autoplay: {
delay: 3000,speed: 2000,loop: true,preloadImages: false,lazy: true,pagination: {
el: '.slider-main__pagination',type: 'bullets',clickable: true,renderBullet: function (index,className) {
return '<span class="slider-main__bullet ' + className + '" data-toggle="' + index + '"></span>';
},navigation: {
nextEl: '.slider-main__nav--next',prevEl: '.slider-main__nav--prev',});
}
setTimeout(main_swiper,5000)
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。