jquery插件jcarousel-0.3.4(connected-carousels)的箭头无法正常工作

时间:2016-07-01 06:32:56

标签: jquery html css

我尝试更改jcarousel的大小以适应我的照片大小。 当我更改大小时,插件的箭头无法正常工作。 上一个箭头无法正常工作。

<head>
    <meta charset="utf-8">
    <title>Connected Carousels - jCarousel Examples</title>

    <link rel="stylesheet" type="text/css" href="~/jcarousel.connected-carousels.css">
    <script type="text/javascript" src="~/Scripts/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="~/dist/jquery.jcarousel.min.js"></script>
    <script type="text/javascript" src="~/jcarousel.connected-carousels.js"></script>
    <script>
        $('.jcarousel').jcarousel({
            vertical: true
        });

    </script>
</head>

<body>

    <div class="wrapper">

        <div class="connected-carousels">
            <div class="stage" style="position: relative;width: 250px;">
                <div class="carousel carousel-stage" style="position: relative;width: 250px;">
                    <ul>
                        <li style="float: left; width: 250px;"><img src="~/images/books/book1.jpg" width="250" height="390" alt=""></li>
                        <li style="float: left; width: 250px;"><img src="~/images/books/book2.jpg" width="250" height="390" alt=""></li>
                        <li style="float: left; width: 250px;"><img src="~/images/books/book3.jpg" width="250" height="390" alt=""></li>
                        <li style="float: left; width: 250px;"><img src="~/images/books/book4.jpg" width="250" height="390" alt=""></li>
                    </ul>
                </div>

                <a href="#" class="prev prev-stage"><span>&lsaquo;</span></a>
                <a href="#" class="next next-stage"><span>&rsaquo;</span></a>
            </div>
            <div class="navigation">
                <a href="#" class="prev prev-navigation">&lsaquo;</a>
                <a href="#" class="next next-navigation">&rsaquo;</a>
                <div class="carousel carousel-navigation">
                    <ul>
                        <li><img src="~/images/books/book1_thumb.jpg" width="50" height="75" alt=""></li>
                        <li><img src="~/images/books/book2_thumb.jpg" width="50" height="75" alt=""></li>
                        <li><img src="~/images/books/book3_thumb.jpg" width="50" height="75" alt=""></li>
                        <li><img src="~/images/books/book4_thumb.jpg" width="50" height="75" alt=""></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

谢谢,Idan

0 个答案:

没有答案