0

你好，

我正在开发一个jquery carousel基于jQuery Liquid Carousel 的插件，但我无法看到下一个和上一个箭头 - 这是为什么呢？

我的代码在这里：http: //jsfiddle.net/g8FaN/

<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>

我在这里做错了什么，因为我看不到下一个和上一个按钮？有人可以调查一下吗？

4

2 回答 2

0

更改<div id="liquid">为<div class="liquid">保存图像的 div。

然后将您的 jquery 代码更改为$('.liquid')...

在这里你可以在 jsfiddle 中看到它：http: //jsfiddle.net/g8FaN/1/

于 2013-02-22T15:40:34.423 回答
-1

打开liquidcarousel.css，搜索这个类

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

并删除宽度属性

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

始终设置图像的高度，并让宽度根据高度动态变化。当然可以。

于 2013-03-19T13:09:18.317 回答