bxSlider：更改li元素的順序

我遇到了顯示bxslider旋轉木馬的問題。bxSlider：更改li元素的順序

HTML（與WP路徑VAR）JS面前：

<ul class="bxslider"> 
     <li><img src="<?php echo get_template_directory_uri(); ?>/img/slides/slide1_193x142.jpg" title="1" /></li> 
     <li><img src="<?php echo get_template_directory_uri(); ?>/img/slides/slide1_193x142.jpg" title="2" /></li> 
     <li><img src="<?php echo get_template_directory_uri(); ?>/img/slides/slide1_193x142.jpg" title="3" /></li> 
     <li><img src="<?php echo get_template_directory_uri(); ?>/img/slides/slide1_193x142.jpg" title="4" /></li> 
     <li><img src="<?php echo get_template_directory_uri(); ?>/img/slides/slide1_193x142.jpg" title="5" /></li> 
     <li><img src="<?php echo get_template_directory_uri(); ?>/img/slides/slide1_193x142.jpg" title="6" /></li> 
     <li><img src="<?php echo get_template_directory_uri(); ?>/img/slides/slide1_193x142.jpg" title="7" /></li> 
     <li><img src="<?php echo get_template_directory_uri(); ?>/img/slides/slide1_193x142.jpg" title="8" /></li> 
    </ul>

JS代碼：

$('.bxslider').bxSlider({ 
     minSlides: 4, 
     maxSlides: 4, 
     slideWidth: 233, 
     slideMargin: 0, 
     controls: false, 
     pager: false, 
     auto: true, 
     autoStart: true, 
     moveSlides: 1, 
     captions: true, 
     infiniteLoop: true, 
     onSliderLoad: function(){$('.bxslider').css('display', 'block');} 
    });

負荷，我得到的幻燈片從slibe№5不№1出發，經過與後自動啓動infiniteloop - 它跳過＃1幻燈片，並直接到№2

這裏的演示： http://olegzharov.com/

嘗試： - goToNextSlide - goToSlide

但無法做到，非常感謝幫助。

來源

2013-10-29 Nico4000

確切的問題是什麼。幻燈片從第1 - 8號開始。你看到了什麼問題？ – MarsOne

看起來非常適合我再次檢查.. – codebreaker

確切的問題是，加載後，我看到幻燈片＃5，而不是＃1 ... – Nico4000

1）I認爲問題是在JS庫/ jQuery插件=之間conlict沒有

2）I認爲問題是與標記，回調=無

我看着throught生成的代碼，發現bxSlider創建8張BX-克隆類的其他幻燈片，所以我只是用

012砍死它

沒有讀過關於bx-clone的更多信息，但是經過2天的測試後，這個解決方案對我來說已經足夠了。

P.S.這不能正常工作，因爲隱藏的幻燈片會在無限循環中滑動。

所以，我沒有這樣的說法（隱藏與負載的CSS的圖像，並顯示負荷後，不是容器）：

$(window).load(function() { 

    // Slider for main page 

    $('.bxslider').bxSlider({ 
      minSlides: 4, 
      maxSlides: 4, 
      slideWidth: 233, 
      slideMargin: 0, 
      controls: false, 
      pager: false, 
      auto: true, 
      autoStart: true, 
      moveSlides: 1, 
      captions: true, 
      infiniteLoop: true, 
      onSliderLoad: function(){$('.bxslider li img').css('display', 'block');} 
    }); 
});

來源

2013-11-02 05:20:17 Nico4000

+1。這對我有用:) – Garry

我試着你的代碼爲bxslider小提琴它工作正常。但我確實看到它在您的演示網址中的功能不同。

嘗試這些2之一，看看是否有幫助：

1）startSlide選項：指定要開始的幻燈片。第一張幻燈片爲0，第二張爲1，依此類推。

var slider = $('.bxslider').bxSlider({ 
     infiniteLoop: true, 
     speed: 500, 
     minSlides: 4, 
     startSlide:3, 
     maxSlides: 4, 
     slideWidth: 233, 
     slideMargin: 0, 
     controls: false, 
     pager: false, 
     auto: true, 
     autoStart: true, 
     moveSlides: 1, 
     captions: true, 
     onSliderLoad: function(){$('.bxslider').css('display', 'block');} 
});

2）goToSlide函數調用。

使用slider變量。查看上面的代碼並在圖像加載後調用函數goToSlide，以專門滑動到所需的幻燈片編號。

slider.goToSlide(0);

檢查溶液here

來源

2013-10-29 12:29:20 VJS

感謝您的回覆，但正如我之前提到的 - 我嘗試了goToSlide並goToNexSlide並startSlide - 什麼也沒有發生。 – Nico4000

要防止克隆你必須將infiniteLoop屬性設置爲false。

來源

2014-07-15 17:49:28 Dubiel

bxSlider：更改li元素的順序

回答

相關問題