重置bxSlider
我对我实现的旋转木马采取了不同的方向，选择了bxSlider而不是jCarousel。 这是我正在建立的图像库http://rjwcollective.com/equinox/rishi_gallery/eqgall.php
我遇到的问题是当我重置filter或选择不同的filter时，滑块不会重置。 这是初始负载的代码：
//first load $.ajax({ type:"POST", url:"sortbystate.php", data:"city=&gender=&category=", success:function(data){ //carousel $('#thumbs').html(data); //alert("whoa, careful there!"); $('#thumbs').bxSlider({auto: false, mode:'vertical', autoControls: false, autoHover: true, pager: false, displaySlideQty: 4, speed:800, infiniteLoop: true, moveSlideQty: 4, controls: true}); } });//end ajax 这是处理filter更改的代码：
$(".statelist :input").click(function(){ var carousel = $('#thumbs').data('jcarousel'); var state = $('.statelist input:checked').attr('value'); var gender = $('.gender input:checked').attr('value'); var category =$('.category input:checked').attr('value'); $.ajax({ type:"POST", url:"sortbystate.php", data:"city="+state+"&gender="+gender+"&category="+category, success:function(data){ //alert("whoa, careful there!"); $('#thumbs').html(data); $('#thumbs').bxSlider({auto: false, mode:'vertical', autoControls: false, autoHover: true, pager: false, displaySlideQty: 4, speed:800, infiniteLoop: true, moveSlideQty: 4, controls: true}); //$('#thumbs').jcarousel('add', index, data); } });//end ajax });
我引用了bxSlider的文档，它有一个内置函数来处理重置：destroyShow（）：function（）
reloadShow（）：function（）
我很困惑我做错了什么。 甚至尝试在使用.empty（），没有骰子加载数据之前清空旋转木马div。
思考？
编辑：链接到bxSlider网站： http ：//bxslider.com/
在文档就绪块外面声明“mySlider”变量为我解决了这个问题：
var mySlider; $(function(){ mySlider= $('#slider').bxSlider({ auto: true, controls: true }); mySlider.reloadShow(); })
亚历克斯
解决方案：使用reloadSlider
slider = $('.bxslider').bxSlider(); slider.reloadSlider();
reloadShow函数执行到函数
destoryShow和initShow
destroyShow函数删除在水平模式下工作正常但在垂直和淡入淡出模式下它还删除滑块内容的所有样式和包装器
尝试用开关替换条件
// unwrap all bx-wrappers // remove any styles that were appended if(options.mode == 'fade' || options.mode == 'verticel'){ $parent.unwrap().unwrap(); $parent.children().removeAttr('style'); }else{ $parent.unwrap().unwrap().removeAttr('style'); $parent.children().removeAttr('style').not('.pager').remove(); }
希望这可以帮助
正如网站上所说：您要将slideshowContainer附加到变量以使用公共函数。 由于reloadShow()和destroyShow()是公共函数，因此这是唯一的方法。 为我工作完美。 我只是简单地说
var $theslideshow = [functionThatCallsYourSlideshow]
在我的函数之前并且之后调用$theslideshow.destroyShow();
希望这可以帮助
使用以下内容：
mySlider.reloadSlider();
它将重置滑块
**注意：对于单击元素时的多个bx滑块重新加载。 *
$（function（）{
var slider1 = $('#slider-1 .product_slider ul').bxSlider({ pager:false, auto:true, }); var slider2 = $('#slider-2 .product_slider ul').bxSlider({ pager:false, auto:true, }); var slider3 = $('#slider-3 .product_slider ul').bxSlider({ pager:false, auto:true, }); var slider4 = $('#slider-4 .product_slider ul').bxSlider({ pager:false, auto:true, }); $('.tab_container ul.nav-tabs li a').on('click',function() { slider1.reloadSlider(); slider2.reloadSlider(); slider3.reloadSlider(); slider4.reloadSlider(); }); });
作者：米兰潘迪亚
我正在编写一个程序，在计时器上进行一堆AJAX调用并在bxslider中显示结果，我也遇到了bxslider没有刷新的问题。这就是我解决它的方法：
var $slider = null;
在需要初始化或刷新滑块的代码部分内部执行以下操作：
if ($slider == null) { $slider = $('.sliderDashboard').bxSlider({ slideWidth: 200, minSlides: 1, maxSlides: 1, slideMargin: 10 }); } else { $slider.reloadSlider(); }
你应该玩这两个 – destroyShow()和reloadShow() 。 我的猜测只是使用reloadShow()但是如果它没有用，请尝试使用destroyShow()然后使用bxSlider() 。 你需要一个变量作为插件api的引用。
var slider = $('#thumbs').bxSlider( { ... } ); slider.reloadShow(); // or slider.destroyShow(); $('#thumbs').bxSlider( { ... } );
祝好运
也参与这个问题：新的BxSlider似乎没有destroyShow（）或reloadShow（）了？ 它至少对我不起作用，它也不在API文档中……只是说。