多個滑塊問題

Question

我有我的一些程序問題，有兩種幻燈片自動工作，但我想兩個載有兩個同樣的舉動，也是我不想beteween兩個幻燈片任何延遲 請幫我 感謝您的幫助

---

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

在這兩個滑塊;

當它移動，我有thease兩個滑塊之間有一些延遲

延遲首先意味着第一個滑塊是第二滑塊後，移動是移動，我不希望出現這種情況

我要兩張幻燈片具有兩個移動相同的路徑沒有任何延遲

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

我可以肯定的是，每當我重新加載頁面兩個滑塊做工精細用相同的時間間隔。每當我移動到新選項卡並返回到我的網頁時，我都遇到了這個問題。兩個滑塊之間是否存在導致滑塊之間延遲的錯誤？ - 感謝您的幫助