Question

是否可以在不丢失滚动按钮行为的情况下显示/隐藏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>

Answer 1

我也有同样的问题，下面是使jcarousel正常工作的解决方案。

实际上jcarousel将滑块绑定到滑块包装器中可用的所有列表项，因此我们只需要更改插件文件“jquery.jcarousel.js”中的内容。

（1）

在第255行替换此行 return this.list（）。children（）;

使用

返回this.list（）。children（'li.show'）;或者返回this.list（）。find（'li.show'）;

（2）在列表项目（li）中添加“show”类，以便它只包含滑块中的该项。

jCarousel使用显示/隐藏列表元素调整问题大小

1 个答案: