Question

我刚刚安装了caroufredsel并且它无法正常工作。我期待发生的是，出现1个图像，我点击下一个或上一个图像将出现。下面的代码只是将我的所有图像显示在列表中。我明白我的错误是因为我的代码看似正确吗？

这是我的JQuery：

<script type="text/javascript" language="javascript" src="js/jquery.carouFredSel-6.2.1-packed.js"></script>
        <script type="text/javascript" language="javascript" src="js/jquery.mousewheel.min.js"></script>
        <script type="text/javascript" language="javascript" src="js/jquery.touchSwipe.min.js"></script>
        <script type="text/javascript" language="javascript" src="js/jquery.transit.min.js"></script>
        <script type="text/javascript" language="javascript" src="js/jquery.ba-throttle-debounce.min.js"></script>
        <script type="text/javascript">
            $('.caroufredsel-gallery').carouFredSel({
                    width: 601,
                    height: 'auto',
                    prev: '#prev3',
                    next: '#next3',
                    auto: false
                });

        </script>

这是我的HTML：

<div>
            <ul class="caroufredsel-gallery">

                    <li><img src="images/gallery/1.jpg" width="601" /></li>
                    <li><img src="images/gallery/2.jpg" width="601" /></li>
                    <li><img src="images/gallery/3.jpg" width="601" /></li>
                    <li><img src="images/gallery/4.jpg" width="601" /></li>
                    <li><img src="images/gallery/5.jpg" width="601" /></li>
                    <li><img src="images/gallery/6.jpg" width="601" /></li>
                    <li><img src="images/gallery/7.jpg" width="601" /></li>
                    <li><img src="images/gallery/8.jpg" width="601" /></li>
                </ul>
                <div class="clearfix"></div>
                <a id="prev3" class="prev" href="#">&lt;</a>
                <a id="next3" class="next" href="#">&gt;</a>
            </div><!--caroufredsel-gallery-->

任何帮助都会非常感激。

谢谢， J

Answer 1

以下是一些可以尝试的事情：

将此代码段放入caroufredsel电话(items :1, scroll : 1)
将此信息放入您的css (.caroufredsel-gallery li { float: left; })

希望这有帮助。此外，请在您使用的任何浏览器中检查控制台，以确保实际调用该插件。它可能是甚至没有找到jQuery。按F12可以进入控制台。希望这会有所帮助。

Answer 2

将您的脚本放在一个函数中。这应该工作。最终脚本应如下所示：

    <script type="text/javascript">
      $(function() {
        $('.caroufredsel-gallery').carouFredSel({
                width: 601,
                height: 'auto',
                prev: '#prev3',
                next: '#next3',
                auto: false
            });
       });
    </script>

JQuery Caroufredsel不工作，显示所有图像

2 个答案: