使用 JQuery 一页上的多个图像滑块

Question

我已经看到了几个相关的问题，但我仍在努力理解它们。所以在测试它时，我想发布这个问题，希望有人可以看到它并给予一些启发。

我的目标是使用相同的（一个）jquery 脚本为不同类别的图像滑块使用 Drupal 中的不同块，这些块将全部显示在主页上。因此，

Block1 - 包含类别 1 的图像滑块 Block2 - 包含类别 2 的图像滑块 Block3 - 包含类别 3 的图像滑块

等等..

我已经能够创建不同的块，但是每次我尝试单击下一个箭头时页面才会刷新。

我从http://coolcarousels.frebsite.nl/ 得到的 JS 如下：

     <script type="text/javascript">
        $(function() {

            $('#carousel ul').carouFredSel({
                prev: '#prev',
                next: '#next',
                pagination: "#pager",
                scroll: 500,
                auto: false
            });

        });
    </script>
           <script src="jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>

HTML 是：

    <div id="wrapper">
        <div id="carousel">
            <ul>
            <li><a href=""><img src="" width="100px"/></a><span>Image1</span></li>
            <li><a href=""><img src="" width="100px"/></a><span>Image2</span></li>
            <li><a href=""><img src="" width="100px"/></a><span>Image3</span></li>
            <li><a href=""><img src="" width="100px"/></a><span>Image4</span></li>
            <li><a href=""><img src="" width="100px"/></a><span>Image5</span></li>
            <li><a href=""><img src="" width="100px"/></a><span>Image6</span></li>

            </ul>
            <div class="clearfix"></div>

            <a id="next" class="next" href="#">&gt;</a>

        </div>
    </div>

提前谢谢大家。

Answer 1

<script type="text/javascript">
$(document).ready(function() {
// Using default configuration
$('#moreVideos_carousel').carouFredSel();

// Using custom configuration
$('#moreVideos_carousel').carouFredSel({
    circular: true,    
    items               : 3,
    direction           : "left",
    scroll : {
        items           : 3,
        easing          : "elastic",
        duration        : 1000,                         
        pauseOnHover    : true
    },     
    prev    : {
    button  : "#morevideos_prev",
    key     : "left"
    },
    next    : {
    button  : "#morevideos_next",
    key     : "right"
 },                   
});



$('#relatedShows_carousel').carouFredSel();

// Using custom configuration
$('#relatedShows_carousel').carouFredSel({
    circular: true,    
    items               : 3,
    direction           : "left",
    scroll : {
        items           : 3,
        easing          : "elastic",
        duration        : 1000,                         
        pauseOnHover    : true
    },     
    prev    : {
    button  : "#relatedShows_prev",
    key     : "left"
    },
    next    : {
    button  : "#relatedShows_next",
    key     : "right"
 },                   
  });
 });
 </script> 

在这里你可以看到我使用了两个不同的轮播...它需要两个不同的 div，+ 4 个不同的按钮或用于下一个和上一个按钮的 a's ...

first carousel  
#moreVideos_carousel
prev btn - #morevideos_prev
next btn - #morevideos_next


second carpousel
#relatedShows_carousel
prev btn - #relatedShows_prev
next btn - #relatedShows_next

你必须有这样的......