0

有没有办法可以从 ajax 在 bxSlider 中插入幻灯片，并且不会影响平滑度！

我想在页面加载时仅显示 1 张幻灯片的内容，然后单击下一个或上一个将相应地加载内容。

这是我尝试过的。

    <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。

4

1 回答 1

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上有关可用选项的文档

于 2013-08-02T10:16:47.073 回答