2012-08-06 41 views
0

有沒有一種方法可以從ajax插入幻燈片到bxSlider中,並且不影響平滑度!bxSlider從ajax載入幻燈片

我想在頁面加載時只顯示1張幻燈片的內容,然後點擊next或prev會相應加載內容。

這是我試過的。

<div id="slider1"> 
    <div class="hotProp pager"> 
    //Here is div content for the first time page load   
    </div> 
    </div> 

    <script type="text/javascript"> 
    $(function(){ 
      page_count = 0; 
      var slider = $('#slider1').bxSlider({ 
      easing:'swing', 
      controls: true, 
    }); 

    $('#go-next').click(function(){ 
        page_count += 1;       
        //send request for next four properties 
        script_name = "~$sf_request->getScriptName()`"; 
        $.getJSON(script_name+"/frontend/projects", {page_count: page_count}, function(response){ 
        div_content = '<div class="hotProp pager"><div class="clr"></div>'; 
        //div_content is content for the next slide 
        $('#slider1').html(div_content); 
        }); 
     slider.goToNextSlide(); 
     return false; 
     }); 
}); 

好像我被劫持的幻燈片的內容:P

請讓我知道我可以做到這一點使用bxSlider的API。 我嘗試使用buildPager,但無法按預期得到slideIndex。

+0

接下來我想是最後尋呼機後插入新的幻燈片內容,然後重裝幻燈片放映。 $( '#slider1')找到。( '尋呼機:去年')。之後(div_content); slider.reloadShow(); slider.goToNextSlide(); – 2012-08-07 13:23:34

+0

http://stackoverflow.com/questions/104381​​13/jquery-bxslider-integrate-ajax可能的重複 – Breezer 2013-04-22 16:53:52

回答

2

好吧,bxSlider現在在其設置中有一個'onSlideNext'和'onSlidePrev'回調選項。這些回調函數在您單擊prev/next按鈕之後以及prev/next轉換開始之前分別被調用。你可以使用它們來獲得你的優勢。例如:

$('#your-slider').bxSlider({ 
    //some default settings here 
    onSlideNext : function($slideElement, oldIndex, newIndex){ 
      //do your ajax here, for example: 
      $.get('some-url',someDataObj,function(response){ 
       $('#your-slider').append(response); 
      }); 
    } 
}) 

微調按您的要求,瞭解更多詳情,請參閱其文檔上的可用選項在http://bxslider.com/options