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个不同的按钮或者用于下一个和前一个按钮...

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


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

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

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

1 个答案: