0

I just installed caroufredsel and its not working. What I am expecting to happen is, 1 images appears, I click next or previous the next or previous image would appear. The code below just has all my images display in a list. I do understand what I am doing wrong as my code seems correct?

Here is my 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>

And here is my 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-->

Any help would greatly appreciated.

Thanks, J

4

2 回答 2

0

这里有几件事可以尝试：

  • 将此代码段放入您的 caroufredsel 调用中(items :1, scroll : 1)
  • 把它放在你的CSS中(.caroufredsel-gallery li { float: left; })

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

于 2013-07-31T15:42:46.233 回答
0

将您的脚本放在一个函数中。那应该行得通。最终脚本应如下所示：

    <script type="text/javascript">
      $(function() {
        $('.caroufredsel-gallery').carouFredSel({
                width: 601,
                height: 'auto',
                prev: '#prev3',
                next: '#next3',
                auto: false
            });
       });
    </script>
于 2013-08-11T00:40:40.847 回答