兩個滑塊與一個導航

在我的新項目中，我需要兩個滑塊（或一個滑塊與選項卡連接）。兩個滑塊與一個導航

這裏是例子 http://oi39.tinypic.com/2yyxxlx.jpg

當我點擊下一步或上一個內容（前滑塊）（在滑蓋下的紅色框）必須改變到另一個內容。

我需要兩個紅色框之間的連接與一個導航。它必須同步。

你能幫我嗎？

我用BXSLIDER

下面是代碼

<div class="slider1"> 
    <div class="slide"> 
     <img src="images/slider/1.jpg" /> 
     <div class="over-text"> 
      <h2>ZAŽI RAKETOVÝ ŠTART</h2> 
      <a href="">link</a> 
     </div> 
    </div> 
    <div class="slide"> 
     <img src="images/slider/2.jpg" /> 
     <div class="over-text"> 
      <h2>ZAŽI RAKETOVÝ ŠTART</h2> 
      <a href="">link</a> 
     </div> 
    </div> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('.slider1').bxSlider({ 
     slideWidth: 1200, 
     minSlides: 1, 
     maxSlides: 1, 
     slideMargin: 0, 
     pause: 8000, 
     speed: 500, 
     controls: true, 
     auto: true, 
     autoStart: false 
    }); 
}); 
</script>

（對不起，我的英語很糟糕）

來源

2013-12-23 Matrinkoo

如果我理解正確，那麼你可以使用plugin's methods。
定義一些操作onSlideNext或onSlidAfter，在您的其他div上操作。
我不知道你會如何得到你的內容，AJAX load()？
還是直接從代碼？無論如何，這是我認爲最好的方法。

所以我的想法是這樣的，但我讓你微調它。所有的
首先定義你的滑塊，使他們屬於一個變量，即可輕鬆調用它們的方法：

mySlide1 = $('.slider1').bxSlider({ 
    //code code code 
} 
mySlide2 = $('.slider2').bxSlider({ 
    //code code code 
}

然後在slider1這一行添加到您的選擇：

onSlideAfter: function() { mySlide2.goToNexSlide()};

這樣當你點擊第一個滑塊時，第二個滑塊將改變滑塊。
或者，您可以在回調中設置任何代碼以獲取您需要的結果。

來源

2013-12-23 09:01:16

嗨Alan，內容將由（靜態）代碼加載。（如果可能的話）如果我有fe。 BXSLIDER的四個滑塊我在滑塊下具有相同數量的DIV。它必須同步。基本上我需要兩個滑塊，我將使用一個導航進行操作。當我點擊NEXT/PREV時，兩個滑塊同時切換。你能告訴我一些你想法的代碼嗎？我認爲你能正確理解我。 – Matrinkoo

好吧，讓我編輯我的答案。 –

這是一個不同的插件，但我真的認爲這是最好的和最靈活的在那裏，它的週期2，這裏是一個鏈接到的jsfiddle我剛纔提出：http://jsfiddle.net/cp6mN/的重要組成部分，也是該data-cycle-next和data-cycle-prev屬性滑塊div和創建按鈕元素喲聲明那裏。

來源

2013-12-23 09:44:22

這就是我需要的，但它只適用於IMG？導致在第二個幻燈片我需要與內容，而不是IMG的DIV。感謝您的回答。 – Matrinkoo

它可以處理任何與你合作的任何東西，你需要添加'data-cycle-slides'屬性並用類似'> div'或者'div'來填充它，你可以在這裏看到所有的API選項：http： //jquery.malsup.com/cycle2/api/ –

@Matrinkoo做到了嗎？如果有，請將我的答案標記爲正確。 –

兩個滑塊與一個導航

回答

相關問題