多个滑块问题

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中，触发第二个滑动，像thins:

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/

这是我做的fiddle，来尝试我的想法。

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,
    });

我可以确定，每当我重新加载页面时，两个滑块都在相同的时间间隔内正常工作。每当我移动到新选项卡并返回我的 webpage.Is 时，我都会遇到这个问题，两个滑块是否有任何错误导致滑块之间的延迟？ -感谢帮助

多个滑块问题

Multiple sliders problems

sliders