jCarousel 调整显示/隐藏列表元素的大小问题
是否可以在 jCarousel 中显示/隐藏列表元素而不丢失滚动按钮行为？我可以动态添加元素，但需要更多工作。
我尝试为“UL”设置动态宽度，但滚动按钮没有被禁用。
这是我使用 jCarousel 的基本示例创建的示例代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<!--
jQuery library
-->
<script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery-1.4.2.min.js"></script>
<!--
jCarousel library
-->
<!--<script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js"></script> -->
<script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js"></script>
<!--
jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="http://sorgalla.com/projects/jcarousel/skins/tango/skin.css" />
<script type="text/javascript">
jQuery(document).ready(function () {
var carouselObj;
jQuery('#mycarousel').jcarousel({ itemLoadCallback: mycarousel_itemLoadCallback });
$("a#lnkHiddenRows").click(function () {
$("ul#mycarousel li.hiddenRow").hide();
carouselObj.visible = 3;
$("ul#mycarousel").css("width", "280px");
//carouselObj.size = 4;
//carouselObj.reload();
//carouselObj.setup();
});
$("a#lnkAllRows").click(function () {
$("ul#mycarousel li.hiddenRow").show();
});
function mycarousel_itemLoadCallback(carousel, state) {
carouselObj = carousel;
};
});
</script>
</head>
<body>
<div id="wrap">
<h1>jCarousel</h1>
<h2>Hide and Show jCarousel List Items.</h2>
<h3>Simple carousel</h3>
<a href="#" id="lnkHiddenRows">Show Hidden Rows Only</a> <br />
<a href="#" id="lnkAllRows">Show All</a>
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
<li class="hiddenRow"><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
<li class="hiddenRow"><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
<li class="hiddenRow"><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
<li class="hiddenRow"><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
<li class="hiddenRow"><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
<li class="hiddenRow"><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</ul>
</div>
</body>
</html>
Is it possible to show/hide list elements within a jCarousel without loosing the scroll button behavior? I can dynamically add the elements but need more work.
I tried to set a dynamic width for the 'UL', but scroll button not getting disabled.
Here is the sample code which I created using basic sample of jCarousel.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jCarousel Examples</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<!--
jQuery library
-->
<script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery-1.4.2.min.js"></script>
<!--
jCarousel library
-->
<!--<script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js"></script> -->
<script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js"></script>
<!--
jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="http://sorgalla.com/projects/jcarousel/skins/tango/skin.css" />
<script type="text/javascript">
jQuery(document).ready(function () {
var carouselObj;
jQuery('#mycarousel').jcarousel({ itemLoadCallback: mycarousel_itemLoadCallback });
$("a#lnkHiddenRows").click(function () {
$("ul#mycarousel li.hiddenRow").hide();
carouselObj.visible = 3;
$("ul#mycarousel").css("width", "280px");
//carouselObj.size = 4;
//carouselObj.reload();
//carouselObj.setup();
});
$("a#lnkAllRows").click(function () {
$("ul#mycarousel li.hiddenRow").show();
});
function mycarousel_itemLoadCallback(carousel, state) {
carouselObj = carousel;
};
});
</script>
</head>
<body>
<div id="wrap">
<h1>jCarousel</h1>
<h2>Hide and Show jCarousel List Items.</h2>
<h3>Simple carousel</h3>
<a href="#" id="lnkHiddenRows">Show Hidden Rows Only</a> <br />
<a href="#" id="lnkAllRows">Show All</a>
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
<li class="hiddenRow"><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
<li class="hiddenRow"><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
<li class="hiddenRow"><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
<li class="hiddenRow"><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
<li class="hiddenRow"><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
<li class="hiddenRow"><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</ul>
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我也遇到了同样的问题，下面是使 jcarousel 工作的解决方案。
实际上，jcarousel 将滑块绑定到滑块包装器中可用的所有列表项，因此我们只需要更改插件文件“jquery.jcarousel.js”中的某些内容即可。
(1)
在第 255 行替换此行
返回 this.list().children();
return
this.list().children('li.show');或者返回 this.list().find('li.show');
(2) 在列表项 (li) 中添加一个类“show”，这样它将仅在滑块中包含该项目。
I am also having the same problem and below is the solution which make the jcarousel working.
Actually the jcarousel bind the slider to all the list items available in the slider wrapper so we just need to change something in the plugin file "jquery.jcarousel.js".
(1)
At line number 255 replace this line
return this.list().children();
With
return this.list().children('li.show'); OR return this.list().find('li.show');
(2) Add a class "show" in list item (li) so it will include only that item in the slider.