無法看到jQuery的液體旋轉木馬插件

我開發一個jquery carousel基於jQuery Liquid Carousel plugin但我無法看到下一個和上箭頭 - 這是爲什麼？

<head> 
    <title></title> 
    <link rel="stylesheet" href="http://www.nikolakis.net/liquidcarousel/css/liquidcarousel.css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> 
    <script type="text/javascript" src="http://www.nikolakis.net/liquidcarousel/js/jquery.liquidcarousel.pack.js"></script> 
    <script> 
     $(document).ready(function() { 
      $('#liquid').liquidcarousel({ height: 129, duration: 100, hidearrows: false }); 
     }); 
    </script> 
</head> 
<body> 
    <div style ="width:200px"> 
     <div id="liquid"> 
      <span class="previous"></span> 
      <div class="wrapper"> 
       <ul> 
        <li><a href="#"> 
         <img src="http://web.scott.k12.va.us/martha2/dmbtest.gif" width="88" height="126" alt="image" /></a></li> 
        <li><a href="#"> 
         <img src="http://web.scott.k12.va.us/martha2/dmbtest.gif" width="88" height="126" alt="image" /></a></li> 
        <li><a href="#"> 
         <img src="http://web.scott.k12.va.us/martha2/dmbtest.gif" width="88" height="126" alt="image" /></a></li> 
        <li><a href="#"> 
         <img src="http://web.scott.k12.va.us/martha2/dmbtest.gif" width="88" height="126" alt="image" /></a></li> 
        <li><a href="#"> 
         <img src="http://web.scott.k12.va.us/martha2/dmbtest.gif" width="88" height="126" alt="image" /></a></li> 
        <li><a href="#"> 
         <img src="http://web.scott.k12.va.us/martha2/dmbtest.gif" width="88" height="126" alt="image" /></a></li> 
        <li><a href="#"> 
         <img src="http://web.scott.k12.va.us/martha2/dmbtest.gif" width="88" height="126" alt="image" /></a></li> 
        <li><a href="#"> 
         <img src="http://web.scott.k12.va.us/martha2/dmbtest.gif" width="88" height="126" alt="image" /></a></li> 

        <li><a href="#"> 
         <img src="http://web.scott.k12.va.us/martha2/dmbtest.gif" width="88" height="126" alt="image" /></a></li> 
        <li><a href="#"> 
         <img src="http://web.scott.k12.va.us/martha2/dmbtest.gif" width="88" height="126" alt="image" /></a></li> 
        <li><a href="#"> 
         <img src="http://web.scott.k12.va.us/martha2/dmbtest.gif" width="88" height="126" alt="image" /></a></li> 
        <li><a href="#"> 
         <img src="http://web.scott.k12.va.us/martha2/dmbtest.gif" width="88" height="126" alt="image" /></a></li> 
       </ul> 
      </div> 
      <span class="next"></span> 
     </div> 
    </div style ="width:200px"> 
</body>

我做了什麼錯在這裏，因爲我看不到未來和以前的按鈕？任何人都可以看着它嗎？

來源

2013-02-22 ALAN

更改<div id="liquid">到<div class="liquid">爲div舉行您的圖像。

然後改變你的jQuery代碼到$('.liquid')...

在這裏，你可以看到它的jsfiddle：http://jsfiddle.net/g8FaN/1/

來源

2013-02-22 15:40:34

謝謝，但是是什麼問題？ – ALAN 2013-02-22 15:46:23

我不這麼認爲。從我在liquidcarousel網站上看到的內容來看，我認爲它應該爲該元素添加類。但事實並非如此。所以我看了一下css，注意到箭頭被引用到'.liquid .next'和'.liquid .previous'。所以改變它到班上工作。 – 2013-02-22 15:50:20

好的，但我有另一個問題，如果我使圖像的寬度和高度60x70，他們之間的距離變得如此之大！ – ALAN 2013-02-22 16:10:03

-1

打開liquidcarousel.css和搜索這類

.liquid ul li { 
    width:126px; 
    padding:0 2px; 
    margin:0; 
}

，並刪除width屬性

.liquid ul li { 
    padding:0 2px; 
    margin:0; 
}

always s等圖像的高度，並根據高度讓寬度動態變化。當然有效。

來源

2013-03-19 13:09:18

無法看到jQuery的液體旋轉木馬插件

回答

相關問題