SlidesJS - 在1頁上有多個「產品」示例滑塊？

Question

我使用在這裏找到SlidesJS產品示例http://slidesjs.com/examples/product/

我想在頁面上有超過1個這些單位，但只是複製它的標記並粘貼在下面不起作用。第一個將顯示正常，但第二個只顯示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）。

給第二個容器唯一標識符將有助於解決問題。那麼你可能會（再次，不能肯定地說沒有看到javascript），需要添加另一個'初始化'調用來設置第二個容器上的幻燈片以及添加到您的CSS的ID，以便第二個容器獲得相同的樣式。

例：

標記

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

的CSS

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