fri*_*shi 3 ajax jquery reload carousel
我对我实现的旋转木马采取了不同的方向,选择了bxSlider而不是jCarousel.这是我正在建立的图像库http://rjwcollective.com/equinox/rishi_gallery/eqgall.php
我遇到的问题是当我重置过滤器,或选择不同的过滤器时,滑块不会重置.这是初始负载的代码:
//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
Run Code Online (Sandbox Code Playgroud)
这是处理过滤器更改的代码:
$(".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
});
Run Code Online (Sandbox Code Playgroud)
我引用了bxSlider的文档,它有一个内置函数来处理重置:destroyShow():function()
reloadShow():function()
我很困惑我做错了什么.甚至尝试在使用.empty(),没有骰子加载数据之前清空旋转木马div.
思考?
编辑:链接到bxSlider网站:http://bxslider.com/
小智 12
在文档就绪块之外声明"mySlider"变量为我解决了这个问题:
var mySlider;
$(function(){
mySlider= $('#slider').bxSlider({
auto: true,
controls: true
});
mySlider.reloadShow();
})
Run Code Online (Sandbox Code Playgroud)
亚历克斯
小智 5
解决方案:使用reloadSlider
slider = $('.bxslider').bxSlider();
slider.reloadSlider();
Run Code Online (Sandbox Code Playgroud)