bxSlider从ajax载入幻灯片

问题描述：

有没有一种方法可以从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。

接下来我想是最后寻呼机后插入新的幻灯片内容，然后重装幻灯片放映。 $（ '＃slider1'）找到。（ '寻呼机：去年'）。之后（div_content）; slider.reloadShow（）; slider.goToNextSlide（）; – 2012-08-07 13:23:34

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

答

好吧，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

bxSlider从ajax载入幻灯片

相关推荐