需要多個elastislide圖像查看一個網頁

Question

我發現這個漂亮的圖像滑塊上：http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/

因爲即時通訊開發一個活動現場這樣的設計：my webpage design，我很想在一個頁面上添加多個（3）滑塊。我是jquery的新手，所以很難編輯jquery代碼，所以它可以識別html上的多個列表來呈現輪播。

<!-- Elastislide Carousel rendering on html--> 
    <ul id="carousel" class="elastislide-list"> 
     <li><a href=""><img src="images/small/1.jpg" alt="image01" /></a></li> 
     <li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li> 
     <li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li> 
     <li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li> 
     <li><a href="#"><img src="images/small/5.jpg" alt="image05" /></a></li> 
     <li><a href="#"><img src="images/small/6.jpg" alt="image06" /></a></li> 

    </ul> 

這裏的腳本：

<script type="text/javascript"> 
    $('#carousel').elastislide({minItems : 2}); 
    </script> 

有人請幫我!!!!

Answer 1

由具有不同ID的工作找到一個解決方案並按如下所示分別呼叫：

<ul id="carousel1" class="elastislide-list"> 
    <li><a href=""><img src="images/small/1.jpg" alt="image01" /></a></li> 
    <li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li> 
    <li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li> 
    <li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li> 
    <li><a href="#"><img src="images/small/5.jpg" alt="image05" /></a></li> 
    <li><a href="#"><img src="images/small/6.jpg" alt="image06" /></a></li> 

</ul> 

<ul id="carousel2" class="elastislide-list"> 
    <li><a href=""><img src="images/small/1.jpg" alt="image01" /></a></li> 
    <li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li> 
    <li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li> 
    <li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li> 
    <li><a href="#"><img src="images/small/5.jpg" alt="image05" /></a></li> 
    <li><a href="#"><img src="images/small/6.jpg" alt="image06" /></a></li> 

</ul> 

JavaScript代碼

<script type="text/javascript"> 
$('#carousel').elastislide({minItems : 2}); 
$('#carouse2').elastislide({minItems : 2}); 
</script> 

Answer 2

只是使用類而不是ID，如下面一個

<ul id="carousel1" class="elastislide-list myCarousel"> 
    <li><a href=""><img src="images/small/1.jpg" alt="image01" /></a></li> 
    <li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li> 
    <li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li> 
    <li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li> 
    <li><a href="#"><img src="images/small/5.jpg" alt="image05" /></a></li> 
    <li><a href="#"><img src="images/small/6.jpg" alt="image06" /></a></li> 

</ul> 

<ul id="carousel2" class="elastislide-list myCarousel"> 
    <li><a href=""><img src="images/small/1.jpg" alt="image01" /></a></li> 
    <li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li> 
    <li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li> 
    <li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li> 
    <li><a href="#"><img src="images/small/5.jpg" alt="image05" /></a></li> 
    <li><a href="#"><img src="images/small/6.jpg" alt="image06" /></a></li> 

</ul> 

JavaScript代碼

<script type="text/javascript"> 
$('.myCarousel').elastislide({minItems : 2}); 
</script> 

使用短一個這樣

<script type="text/javascript"> 
    $('#carousel,#carouse2').elastislide({minItems : 2}); 
</script> 

Answer 3

我用類而不是ID，但仍然沒有。 2滑塊不起作用。然而，使用每個jQuery的，它的工作：

jQuery('.carousel').each(function(){ 
    jQuery(this).elastislide({ 
     minItems : 2 
    }); 
}) 

Answer 4

，如果你想有2個不同的滑塊用自己的導航，但是如果你想有一個單一的導航和控制兩個滑塊，這裏是快速的摘錄，很好的解決幫助你解決它。使用顯示隱藏elastislide默認的按鈕：沒有，像這樣

.elastislide-prev{ 
    display: none; 
} 

.elastislide-next{ 
    display: none; 
} 

添加您自己的自定義導航：

<nav> 
<span class="elastislide-newleft a" style="display: block;">Previous</span> 
<span class="elastislide-newright b" style="display: block;">Next</span> 
</nav> 

在elastislide JS：

添加以下_addControls ：function（）{

var xyz = $('.fixed-bar'); 

this.$navPrev = xyz.find('span.elastislide-newleft').on('mousedown.elastislide', function(event) { 
       self._slide('prev'); 
       return false; 
}); 
this.$navNext = xyz.find('span.elastislide-newright').on('mousedown.elastislide', function(event) { 
       self._slide('next'); 
       return false; 
}); 

這將幫助你滑動2滑塊只需一次點擊創建一個非常好的網格傳送帶效果。