我对实现的旋转木马采取了不同的方向,选择了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
这是用于处理过滤器更改的代码:
$(".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(); })
亚历克斯