公共方法bxslider多個幻燈片

Question

我有多個幻燈片和IM使用此代碼：

var demo = $('.demo').bxSlider({ 
mode: 'horizontal', 
captions: false, 
touchEnabled: true, 
controls: false, 
pager:false 
}); 

$('.slider-next').click(function(){ 
demo.goToNextSlide(); 
return false; 
}); 

$('.slider-prev').click(function(){ 
demo.goToPrevSlide(); 
return false; 
}); 

，但它不工作...任何一個有一個想法，爲什麼會這樣？

謝謝！

Answer 1

我在一個頁面上遇到了與多個滑塊相同的問題：用於控制幻燈片的公共函數無效（與您的示例中的方法相同）。

解決方法是設置controls = true併爲每個實例創建唯一的「prevSelector」和「nextSelector」。這樣bxslider-instance就擁有每個獨特的prev en next-buttons（圖像或任何你在那裏填入的文本）。 我認爲不需要將bxslider連接到獨特的div（id）的方式。

此實現對我的作品與childID的具有約束力的VAR的獨特性：

HTML（/ PHP）：

<div id="previousperiod_<?=$this->child->getId()?>"></div> 
<div class="bxslider" id="bxslider_<?=$this->child->getId()?>" childid="<?=$this->child->getId()?>"> 
    <div>slide1</div> 
    <div>slide2</div> 
</div> 
<div id="nextperiod_<?=$this->child->getId()?>"></div> 

的Javascript：

$("div.bxslider").each(function() { 
    var childid = $(this).attr("childid"); 
    var sliderid = $(this).attr("id"); 
    $("div#"+sliderid).bxSlider({ 
     infiniteLoop: false, 
     pager: false, 
     controls: true, 
     nextText: "<img src=\"img/icon/arrow_right.png\"/>", 
     prevText: "<img src=\"img/icon/arrow_left.png\"/>", 
     prevSelector: "#previousperiod_"+childid, 
     nextSelector: "#nextperiod_"+childid, 
     onSlideBefore: function($slideElement, oldIndex, newIndex) { 
      //handle appearance prev- and nextSelectors 
     } 
    }); 
}); 

您可以使用回調函數來處理prev和nextSelectors的外觀。

Answer 2

我希望，jquery.bxslider.min.js會自動處理上面的過程，那麼爲什麼要爲此編寫單獨的腳本呢？和bxslider腳本完美運行。

Answer 3

我找不到任何與多個滑塊和公共功能有關的問題。

$(document).ready(function(){ 
    var slideobj3=$('.slider1').bxSlider({ 
    mode: 'horizontal', 
    slideWidth: 200, 
    minSlides: 2, 
    maxSlides: 3, 
    slideMargin: 0, 
    pager: false, 
    controls:false 
    }); 
    var slideobj2=$('.slider2').bxSlider({ 
    mode: 'horizontal', 
    slideWidth: 200, 
    minSlides: 2, 
    maxSlides: 3, 
    slideMargin: 0, 
    pager: false, 
    controls:false 
    }); 
    var slideobj1=$('.slider3').bxSlider({ 
    mode: 'horizontal', 
    slideWidth: 200, 
    minSlides: 2, 
    maxSlides: 3, 
    slideMargin: 0,  
    pager: false, 
    controls:false 
    }); 
    $('#test').click(function(){ 
     slideobj1.goToNextSlide() 
     slideobj2.goToPrevSlide() 
     slideobj3.goToNextSlide() 

    }); 
}); 

我的代碼工作以及.. bxslider with multiple rows.

Answer 4

我有同樣的問題，但我用each選擇和對象數組解決。 有一個「很多」parent().parent().parent()，但它的工作原理！

請注意，我使用自定義next和prev鏈接，它們必須位於滑塊容器外部。

在我的劇本看一看http://jsfiddle.net/33Jjr/1/

HTML

<div class="category-slider"> 
<a href="" class="prev">prev</a> 
<a href="" class="next">next</a> 
    <ul> 
    <li><img src="http://placehold.it/350x150&text=FooBar1" /></li> 
    <li><img src="http://placehold.it/350x150&text=FooBar2" /></li> 
    <li><img src="http://placehold.it/350x150&text=FooBar3" /></li> 
    </ul> 
</div> 

<div class="category-slider"> 
<a href="" class="prev">prev</a> 
<a href="" class="next">next</a> 
    <ul> 
    <li><img src="http://placehold.it/350x150&text=FooBar7" /></li> 
    <li><img src="http://placehold.it/350x150&text=FooBar8" /></li> 
    <li><img src="http://placehold.it/350x150&text=FooBar9" /></li> 
    </ul> 
</div> 

和JavaScript

var swipes = [] 
$('.category-slider > ul').each(function (i, obj) { 
swipes[i] = $(this).bxSlider({ 
    mode: 'horizontal', 
    slideWidth: 200, 
    minSlides: 3, 
    maxSlides: 3, 
    moveSlides: 1, 
    slideMargin: 0, 
    pager: false, 
    controls:false 
}) 

$(this).parent().parent().parent().find('.prev').on('click', function (e) { 
    e.preventDefault() 
    swipes[i].goToPrevSlide() 
}) 

$(this).parent().parent().parent().find('.next').on('click', function (e) { 
    e.preventDefault() 
    swipes[i].goToNextSlide() 
    }) 
}); 

Answer 5

我已知悉，只有當我的 '模式' 設置爲「出現這個問題水平「或」垂直「。 對於「淡入淡出」模式，它可以解決任何問題。