有没有一种方法可以从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。
好吧,bxSlider现在在其设置中有一个"onSlideNext"one_answers"onSlide Previv"回调选项。这些回调分别在单击上一个/下一个按钮之后和上一个或下一个转换开始之前调用。你可以利用它们为自己谋利。例如:
$('#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