Javascript slider [rcarousel] - 如何在一个网站上使用多个 slider ？

Question

我正在尝试在我的网站上创建一个 javascript slider 。一切正常，但是当我尝试添加多个 slider 时，它不起作用。我只能使用第一个箭头来更改 slider 的位置。 Secod 和其他 slider (这些 slider 的箭头)不起作用。

这是演示:http://majk23.vot.pl/slider/index.html

我知道这是因为 ID 和 CSS 类使用了多个，而 javascript 代码对此一无所知，但我尝试为类名或 ID 添加一些独特的东西，但它仍然不起作用。

在 rcarousel 的 DOC ( http://ryrych.pl/rcarousel/#examples ) 中我们可以找到:“一页上有多个轮播”，但是在这个演示中作者没有使用箭头，所以它对我没有帮助:http://ryrych.pl/rcarousel/examples/multi.html

感谢您的帮助。

Answer 1

这是行不通的，因为 carousel 的上一个和下一个箭头的 ID 相同，例如 ui-carousel-next 和 ui-carousel-prev 包含轮播的 div 具有相同的 id

重要:永远不要为多个元素使用相同的 ID。在您的整个 DOM 中，id 必须不同。同时解释您的代码。

               $( "#carousel ").rcarousel({
                    visible: 1,
                    step: 1
                });
                
                $( ".ui-carousel-next" )
                    .add( "#ui-carousel-prev" )
                    .hover(
                        function() {
                            $( this ).css( "opacity", 0.7 );
                        },
                        function() {
                            $( this ).css( "opacity", 1.0 );
                        }
                    );

第一行 $( "#carousel ").rcarousel() 在这里因为你有相同的 id carousel 对于 2 个不同的 div 是 $ 的结果("#carousel") 只是 jquery 可以从顶部开始在 DOM 中找到的第一个元素。这就是该插件仅适用于第一个插件的原因，因为它是唯一一个由您使用的 jquery 选择器选择的插件。

解决方案:

为您的 div 创建两个不同的 id，并单独应用插件。

或

在 div 上使用类名，然后使用带有类名的 jquery 选择器应用插件。例如:$( ".carousel ").rcarousel({}) 你的 div 将有类轮播。让我知道这是否有帮助

编辑: 因为您要求提供示例。在这里

通过删除 id 和添加新的类名来更改您的 div。

<div class="ui-carousel carouselContainer" style="width: 500px; overflow: hidden; height: 400px;">
<div class="ui-carousel carouselContainer" style="width: 500px; overflow: hidden; height: 400px;">

现在通过循环 div 添加插件，如下所示，

$.each($('.carouselContainer'),function(i,v){
       $(this).rcarousel({  //here $(this) will refer to the single div that is in iteration
          visible: 1,
          step: 1
        });
      // your other stuff's goes here
   });

编辑 2: 在查看插件文档后，我发现了如何将选择元素设置为旋转木马 () 的下一个和上一个箭头。该插件中有默认值，它始终适用于 "#ui-carousel-next" 和 "#ui-carousel-prev" 所以你的箭头只工作对于第一个旋转木马(因为从 ID 选择时只会在 DOM 中选择第一个元素)，我们可以通过设置自定义值来覆盖它。为此，请将您的代码更改为以下内容。

这是你们两个 div:注意我有 div 和箭头 anchor 标记的差异 ID。

          <div class="container">
                <div  id="a_carousel" class="carousel">
                    <a href="http://ryrych.pl"><img src="images/001.jpg" /></a>
                    <a href="http://google.pl"><img src="images/002.jpg" /></a>
                    <a href="http://niezalezna.pl"><img src="images/003.jpg" /></a>
                </div>
                <a href="#" id="a_ui-carousel-next" class="ui-carousel-next"><span>next</span></a>
                <a href="#" id="a_ui-carousel-prev" class="ui-carousel-prev"><span>prev</span></a>
            </div>
            <div class="container">
                <div id="b_carousel" class="carousel">
                    <a href="http://ryrych.pl"><img src="images/001.jpg" /></a>
                    <a href="http://google.pl"><img src="images/002.jpg" /></a>
                    <a href="http://niezalezna.pl"><img src="images/003.jpg" /></a>
                </div>
                <a href="#" id="b_ui-carousel-next"  class="ui-carousel-next"><span>next</span></a>
                <a href="#" id="b_ui-carousel-prev" class="ui-carousel-prev"><span>prev</span></a>
            </div>

两个 div 的脚本如下所示，请注意新的导航选项。

           $( "#a_carousel ").rcarousel({
                visible: 1,
                step: 1,
                navigation: {
                           next: "#a_ui-carousel-next",
                           prev: "#a_ui-carousel-prev"
                }
            });
            $( "#b_carousel ").rcarousel({
                visible: 1,
                step: 1,
                navigation: {
                           next: "#b_ui-carousel-next",
                           prev: "#b_ui-carousel-prev"
                }
            });

并用

替换你的CSS

            .container {
                width: 220px;
                position: relative;
            }
            
            .carousel {
                margin: 0 auto;
            }

            .carousel img {
                border: 0;
            }

            .ui-carousel-next, .ui-carousel-prev {
                width: 60px;
                height: 100px;
                background: url(images/arrow-left.png) #fff center center no-repeat;
                display: block;
                position: absolute;
                top: 0;
                z-index: 100;
            }

            .ui-carousel-next {
                right: 0;
                background-image: url(images/arrow-right.png);
            }

            .ui-carousel-prev {
                left: 0;
            }
            
            .ui-carousel-next > span, .ui-carousel-prev > span {
                display: none;
            }   

这是插件的详细信息

编辑 3: 为了让您更轻松，我创建了一个工作示例并将整个元素上传到 sendspace.com，这里是链接 ForMajksonHTMLCarousel您可以从那里下载并查看示例文件夹中的 links.html 以找到您的解决方案。