與顯示的jCarousel調整大小問題/隱藏列表元素

是否有可能表現出的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>

來源

2011-07-10 Dilish

正如一個評論，我們最後使用easySlider。我在jCarousel遇到了很多問題，其中一個很大。 easySlider差不多是2千字節。 –

如果您看到jcarousel.js文件，那麼您會發現啓用和禁用next/prev按鈕是在幻燈片的第一位進行計算的。所以你必須相應地修改jcarousel.js文件。 – a5his

感謝您的建議@Saeed，我們現在無法遷移到easySlider，因爲我們已接近截止日期，但我確信我會試一試。 – Dilish

我也有同樣的問題，下面是使jcarousel工作的解決方案。

其實的jCarousel滑塊綁定到所有在滑塊可用的包裝列表項，所以我們只需要更改插件文件「jquery.jcarousel.js」的東西。

（1）

在行號255替換此線返回this.list（）的兒童（）;

隨着

回報this.list（）兒童（ 'li.show'）。 OR返回this.list（）。find（'li.show'）;

（2）添加在列表項的一類「秀」（李），因此它將包括在滑塊僅該項目。

來源

2013-12-01 11:54:36

你也可以替換return this.list（）。children（）;返回this.list（）。children（'：visible'）; –

與顯示的jCarousel調整大小問題/隱藏列表元素

回答

相關問題