2013-10-29 72 views
1

我遇到了顯示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

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

+0

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

+0

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

+0

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

回答

5

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');} 
    }); 
}); 
+0

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

0

我試着你的代碼爲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

+0

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

0

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