-4

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

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

在这两个滑块中；

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

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

我想要两张幻灯片有两条移动相同的路径，没有任何延迟

4

2 回答 2

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/

这是我制作的小提琴，以尝试我的想法。

于 2015-05-18T07:39:47.663 回答
0

问题是我有两个滑动时间间隔为 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,
    });

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

于 2015-05-18T08:55:54.660 回答