jQuery 重置 bxSlider
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5845180/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
resetting bxSlider
提问by frishi
I took a different direction with a carousel I implemented, opting for bxSlider instead of jCarousel. This is for an image gallery I am building http://rjwcollective.com/equinox/rishi_gallery/eqgall.php
我使用我实现的轮播选择了不同的方向，选择 bxSlider 而不是 jCarousel。这是我正在构建的图片库http://rjwcollective.com/equinox/rishi_gallery/eqgall.php
The issue I am running into is when I reset the filters, or select a different filter, the slider doesn't reset. This is the code for the inital load:
我遇到的问题是当我重置过滤器或选择不同的过滤器时，滑块不会重置。这是初始加载的代码：
//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
This is the code for handling the change of a 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
});
I referred bxSlider's documentation and it had a built-in function to handle a reset:
destroyShow(): function()
reloadShow(): function()
我参考了 bxSlider 的文档，它有一个内置函数来处理重置： destroyShow(): function()
reloadShow(): function()
I am confused as to what I am doing wrong. Even tried emptying the carousel div before loading it with data, using .empty(), no dice.
我对我做错了什么感到困惑。甚至尝试在加载数据之前清空 carousel div，使用 .empty()，没有骰子。
Thoughts?
想法？
Edit: link to the bxSlider website: http://bxslider.com/
编辑：链接到 bxSlider 网站：http://bxslider.com/
回答by Alex
Declaring the "mySlider" variable outside the document-ready block solved the problem for me:
在文档就绪块之外声明“mySlider”变量为我解决了这个问题：
var mySlider;
$(function(){
mySlider= $('#slider').bxSlider({
auto: true,
controls: true
});
mySlider.reloadShow();
})
Alex
亚历克斯
回答by anbwar
Solution : use reloadSlider
解决方案：使用 reloadSlider
slider = $('.bxslider').bxSlider();
slider.reloadSlider();
回答by user3690101
** Note : For the multiple bx slider reload on click of the element. *
** 注意：对于多个 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();
});
});
By: Milan Pandya
作者：米兰·潘迪亚
回答by Denys Wessels
I was writing a program which make a bunch of AJAX calls on a timer and displays the results in a bxslider and I also ran into a problem where the bxslider wasn't refreshing.This is how I solved it:
我正在编写一个程序，它在计时器上进行一堆 AJAX 调用并将结果显示在 bxslider 中，我还遇到了 bxslider 不刷新的问题。这就是我解决它的方法：
var $slider = null;
And inside the portion of code where you need to initialize or refresh the slider do this:
在需要初始化或刷新滑块的代码部分中，执行以下操作：
if ($slider == null) {
$slider = $('.sliderDashboard').bxSlider({
slideWidth: 200,
minSlides: 1,
maxSlides: 1,
slideMargin: 10
});
}
else {
$slider.reloadSlider();
}
回答by David
As the website says: you have the slideshowContainerto be attached to a variable in order to use the public functions. As reloadShow()and destroyShow()are public functions, this is the only way to go. Worked perfectly for me.
I've simply put a
正如网站所说：您必须slideshowContainer附加到变量才能使用公共功能。由于reloadShow()和destroyShow()是公共职能，这是唯一的出路。非常适合我。我简单地放了一个
var $theslideshow = [functionThatCallsYourSlideshow]
before my function and called afterwards $theslideshow.destroyShow();
在我的函数之前和之后调用 $theslideshow.destroyShow();
hope this helps
希望这可以帮助
回答by Anil Gupta
the reloadShow funciton execute to function
reloadShow 函数执行到函数
destoryShow and initShow
destoryShow 和 initShow
destroyShow function delete all style and wrapper which is working fine in horizontal mode but in vertical and fade mode it also delete the content of slider
destroyShow 函数删除所有在水平模式下工作正常的样式和包装器，但在垂直和淡入淡出模式下它也会删除滑块的内容
try replace condition with switch
尝试用开关替换条件
// 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();
}
hope this helps
希望这可以帮助
回答by TommyK
To participate in this question as well: the new BxSlider doesn't seem to have a destroyShow() or reloadShow() anymore? It doesn't work for me at least, and it isn't in the API documentation as well... Just saying.
也参与这个问题：新的 BxSlider 似乎不再有 destroyShow() 或 reloadShow() 了？它至少对我不起作用，它也不在 API 文档中......只是说。
回答by Bharat Sukhwal
Use the following:
使用以下内容：
mySlider.reloadSlider();
It will reset the slider
它将重置滑块
回答by Z. Zlatev
You should play with these two - destroyShow()and reloadShow(). My guess is using reloadShow()only but if it doesn't work out try destroyShow()followed by bxSlider(). You'll need a variable as a reference to the plugin api.
你应该玩这两个 -destroyShow()和reloadShow()。我的猜测是reloadShow()只使用，但如果它不起作用，请尝试destroyShow()后跟bxSlider(). 您需要一个变量作为对插件 api 的引用。
var slider = $('#thumbs').bxSlider( { ... } );
slider.reloadShow(); // or slider.destroyShow(); $('#thumbs').bxSlider( { ... } );
Good luck
祝你好运
