javascript - SlidesJS-1页上有多个“产品”示例滑块吗？

我正在使用在http://slidesjs.com/examples/product/处找到的SlidesJS产品示例

我想在页面上包含多个这样的单元，但是仅复制其标记并粘贴到下面是行不通的。第一个显示正常，但是第二个仅显示2个分页元素，并且不可单击。我的主要问题是，为什么我再次复制滑块的方法不起作用，而我的一般方法完全错误吗？一般来说，SlidesJS或Jquery有一些古怪之处，需要我创建单独的CSS div或类似的东西吗？

HTML：

<div id="containerSlides">
      <div id="products_example">
        <div id="products">
            <div class="slides_container">
                <a href="#"><img src="img/lamp1.png" width="360" alt="1144953 3 2x"></a>
                <a href="#" ><img src="img/lamp2.png" width="360" alt="1144953 1 2x"></a>

            </div>
            <ul class="pagination">
                <li><a href="#"><img src="img/lamp1.png" width="55" alt="1144953 3 2x"></a></li>
                <li><a href="#"><img src="img/lamp2.png" width="55" alt="1144953 1 2x"></a></li>
            </ul>
        </div>
    </div>
</div>
<div id="containerSlides">
      <div id="products_example">
        <div id="products">
            <div class="slides_container">
                <a href="#"><img src="img/lamp3.png" width="360" alt="1144953 3 2x"></a>
                <a href="#" ><img src="img/lamp4.png" width="360" alt="1144953 1 2x"></a>

            </div>
            <ul class="pagination">
                <li><a href="#"><img src="img/lamp3.png" width="55" alt="1144953 3 2x"></a></li>
                <li><a href="#"><img src="img/lamp4.png" width="55" alt="1144953 1 2x"></a></li>
            </ul>
        </div>
    </div>
</div>

CSS：

#containerSlides {
    width:580px;
    padding:10px;
    margin:0 auto;
    position:relative;
    z-index:0;
    float:left;
}

#products_example {
    width:600px;
    height:282px;
    position:relative;
}

/*
    Slideshow
*/

#products {
    margin-left:26px;
}

/*
    Slides container
    Important:
    Set the width of your slides container
    Set to display none, prevents content flash
*/

#products .slides_container {
    width:360px;
    /*overflow:hidden;*/
    float:left;
    position:relative;
    border:1px solid #dfdfdf;
    display:none;
}

/*
    Each slide
    Important:
    Set the width of your slides
    If height not specified height will be set by the slide content
    Set to display block
*/

.slides_container a {
    width:360px;
    height:268px;
    display:block;
}

/*
    Next/prev buttons
*/

#products .next,#products .prev {
    position:absolute;
    top:127px;
    left:0;
    width:21px;
    height:0;
    padding-top:21px;
    overflow:hidden;
    display:block;
    z-index:101;
}

#products .prev {
    background:url(../img/arrow-prev.png);
}

#products .next {
    left:398px;
    background:url(../img/arrow-next.png);
}

/*
    Pagination
*/

#products .pagination {

    width:55px;
    padding:5px 5px;
    float:left;
    margin-left:30px;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
}

#products .pagination li {
    float:left;
    margin:2px 4px;
    list-style:none;
}

#products .pagination li a {
    display:block;
    width:55px;
    height:41px;
    margin:1px;
    float:left;
    background:#f9f9f9;
}

#products .pagination li.current a {
    border:1px solid #7f7f7f;
    margin:0;
}

最佳答案

在没有看到javascript的情况下，无法确切地说出问题出在哪里，但是标记存在一些直接的问题。

您在页面上有多个具有相同ID的元素（containerSlides，products_example，products）。

给第二个容器唯一的ID将有助于解决问题。然后，您可能（再次，不能看到javascript就不能肯定地说）需要添加另一个“初始化”调用以在第二个容器上设置slidesjs，并将ID添加到您的CSS中，以便第二个容器具有相同的样式。

例如：

标记

<code>
<div id="secondContainerSlides">
    …
</div>
</code>

的CSS

<code>
#containerSlides,
#secondContainerSlides{
    …
}
</code>