Question

我的程序中有一些问题两个幻灯片自动工作但我想要两个幻灯片有两个相同的移动，我也不希望两个幻灯片之间有任何延迟请帮我谢谢你的帮助

var mySwiper = new Swiper('#first-slider',{
        loop:true,
        grabCursor: true,
        autoplay: 2500,
        simulateTouch: false,
        transitionSpeed: 1000,

var mySwiper1 = new Swiper('#second-slider',{
        loop:true,
        grabCursor: true,
        autoplay: 2500,
        simulateTouch: false,
        transitionSpeed: 1000,
    });

在这两个滑块中;

当它移动时我在两个滑块之间有一些延迟

延迟意味着首先第一个滑块在第二个滑块移动后移动我不想要

我希望两个幻灯片有两个移动相同的路径，没有任何延迟

Answer 1

因此，作为解决方法，请勿在定时间隔内设置两个滑块。

仅将第一个滑块设置为自动播放。然后在onSlideChangeStart中，触发第二个滑动，如同：

var mySwiper = new Swiper('#first-slider',{ loop:true, grabCursor:true,  
autoplay: 2500, simulateTouch: false, transitionSpeed: 1000, 
onSlideChangeStart: function(swiper, direction) {
     mySwiper1.slideNext();
} });

var mySwiper1 = new Swiper('#second-slider',{ loop:true, grabCursor: 
true, simulateTouch: false, transitionSpeed: 1000});

这样你的狙击手就可以做到这一点，但第二个取决于第一个，所以他们总是一起移动......

使用此代码段尝试，如果符合您的要求，则接受答案：）

var mySwiper = new Swiper('#first-slider',{ loop:true, grabCursor:true,  
autoplay: 2500, simulateTouch: false, transitionSpeed: 1000, 
// Navigation arrows
onSlideChangeStart: function(swiper, direction) {
    if (typeof mySwiper1 != "undefined"){
        mySwiper1.slideNext();
    }else{
        alert("PageLoad");
    }
} 
 });
var mySwiper1 = new Swiper('#second-slider',{ loop:true, grabCursor: 
true, simulateTouch: false, transitionSpeed: 1000});

.swiper-container {
    width: 100px;
    height: 100px;
}

<link href="http://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.6/css/swiper.min.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.6/js/swiper.jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.6/js/swiper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Slider main container -->
<div class="swiper-container" id='first-slider'>
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper" >
        <!-- Slides -->
        <div class="swiper-slide" style="background-color:red">Slide 1</div>
        <div class="swiper-slide" style="background-color:green">Slide 2</div>
        <div class="swiper-slide" style="background-color:yellow">Slide 3</div>        
    </div>
    
</div>  
 <!-- Slider main container -->
<div class="swiper-container" id='second-slider'>
    <div class="swiper-wrapper" >
        <!-- Slides -->
        <div class="swiper-slide" style="background-color:green">Slide 1</div>
        <div class="swiper-slide" style="background-color:yellow">Slide 2</div>
        <div class="swiper-slide" style="background-color:blue">Slide 3</div>        
    </div>
</div>

另外，你可以玩： http://jsfiddle.net/yuayL7zq/2/

这是一个小提琴，试试我的想法。

Answer 2

问题是我有两个滑动时间间隔为2500的滑块。在这种情况下，两个滑块在第一时间没有任何延迟地正常工作。之后，如果我在浏览器中打开两个或更多新标签，然后转到我的网页。现在两个滑块之间存在延迟。

以下是我用于滑动功能的代码

var mySwiper = new Swiper('#first-slider',{
        loop:true,
        grabCursor: true,
        autoplay: 2500,
        simulateTouch: false,
        transitionSpeed: 1000,
        onSlideChangeStart: function(swiper, direction) {// my task will go here...}
    });

var mySwiper1 = new Swiper('#second-slider',{
        loop:true,
        grabCursor: true,
        autoplay: 2500,
        simulateTouch: false,
        transitionSpeed: 1000,
    });

我可以肯定每当我重新加载页面时，两个滑块在相同的时间间隔内正常工作。每当我移动到新标签并回到我的网页时，我就遇到了这个问题。两个滑块中是否有任何错误导致滑块之间出现延迟？ - 感谢您的帮助

多个滑块问题

2 个答案: