Question

我正在使用此处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;
}

Answer 1

如果没有看到javascript，就无法准确说出问题所在，但是标记存在一些直接问题。

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

为第二个容器提供唯一ID将有助于解决问题。然后你可能（再次，不能肯定地说，没有看到javascript）需要添加另一个'初始化'调用来在第二个容器上设置slidesjs以及将id添加到你的css，以便第二个容器获得相同的样式

例如：

标记

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

的CSS

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

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

1 个答案: