Question

我正在使用this网站上的Carousel示例对于页面上的一个单独的轮播，它运行良好，但是当我在同一页面上有多个轮播时，它只显示顶部轮播的导航按钮，当顶部轮播移动时，所有其他轮转移动。
我试图让他们每个人独立行动......

              <script src="/Scripts/jMyCarousel.js" type="text/javascript"></script>
              ...

             foreach(something)
             {
              <div class="jMyCarousel">
                 <ul>
                    <li>image1</li>
                    <li>image1</li>
                    ...
                 </ul>
              </div>
             }
              ...

             <script type="text/javascript">
                $(function() {
                $(".jMyCarousel").jMyCarousel({ visible: '50%', eltByElt: true });
                });
             </script>

据我所知，如果在脚本（最后一部分）我正在使用该类（例如“.jMyCarousel”），它应该为每个具有此类名称的项目创建一个新的轮播...但是这里事实并非如此。

知道如何让每个旋转木马独立吗？

Answer 1

为您找到此链接

Image carousel 1.0.3 is out

他们在这里有多个实例的演示

demo page

检查演示页面的代码：

    $(function() {
        $(".JMyCarousel#carousel1").jMyCarousel({
            visible: '100%'
        });
        $(".JMyCarousel#carousel2").jMyCarousel({
            visible: '4',
            eltByElt: true,
            evtStart: 'mousedown',
            evtStop: 'mouseup'
        });
        $(".JMyCarousel#carousel3").jMyCarousel({
            visible: '3',
            auto : false, 
            vertical : true,
            speed : 500
        });
    });

我知道你不知道会有多少div，所以这对你来说是一个问题。你不能动态创建ID吗？

Answer 2

请勿按原样使用选择器。那不是真正的迭代。使用迭代器并为每个循环应用行为。示例：

$(".jMyCarousel").each(function(){ 
    $(this).jMyCarousel({ visible: '50%', eltByElt: true });
});

我发表了我的评论作为答案，所以你可以关闭这个问题：）

分别移动每个JavaScript项目

2 个答案: