Question

你好，

我正在根据jQuery Liquid Carousel plugin开发jquery carousel，但我无法看到下一个和之前的箭头 - 为什么会这样？

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

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

Answer 1

将<div id="liquid">更改为<div class="liquid">以获取包含图片的div。

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

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

Answer 2

打开liquidcarousel.css并搜索此类

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

并删除width属性

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

始终设置图像的高度，并根据高度调整宽度。当然有效。

无法在jQuery Liquid Carousel插件中看到下一个/上一个箭头

2 个答案: