Question

我正在尝试在我的网站上创建一个javascript滑块。一切都很好但是当我尝试添加多个滑块时，它不起作用。我只能使用第一个箭头来改变滑块的位置。 Secod和其他滑块（这些滑块的箭头）不起作用。

以下是演示：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

这不起作用，因为旋转木马对于上一个和下一个箭头（例如ui-carousel-next和ui-carousel-prev也有div which holds the carousel has the same id's

具有相同的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()，因为对于2个不同的div，你有相同的id carousel，$( "#carousel ")的结果只是jquery从顶部开始在DOM中找到的第一个元素。这就是插件仅适用于第一个插件的原因，因为它是您使用过的jquery选择器中唯一选择的插件。

<强>解决方案：

为你的div制作两个不同的id并单独应用插件。

OR

在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"因此，您的箭头仅适用于第一个轮播（因为从DOM中选择时，只有DOM中会选择第一个元素） ID），我们可以通过设置自定义值来覆盖它。为此，请将代码更改为以下内容。

这些是你的两个div：注意我有div和箭头锚标签的差异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：为了让您更轻松，我创建了一个工作示例并将整个项目上传到sentpace.com，这里是链接ForMajksonHTMLCarousel 您可以从那里下载并查看示例文件夹中的links.html以找到您的解决方案。

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

1 个答案: