一页上需要多个elastislide图像查看器 [英] Need for multiple elastislide image viewers on one page

问题描述

我找到了这个漂亮的图像滑块: http://tympanus. net/codrops/2011/09/12/elastislide-sensitive-carousel/

I found this nifty image slider: http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/

由于我使用以下设计开发了活动网站:我的网页设计，所以我会喜欢在一页上添加多个(3)滑块.我是jquery新手，因此很难编辑jquery代码，因此它可以在html上标识多个列表以呈现轮播.

Since im developing an events site with this design: my webpage design, i would love to add multiple (3) sliders on one page. I am new to jquery so its difficult to edit the jquery code so it can identify multiple lists on the html for rendering the carousel.

<!-- 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>

有人请帮帮我！!!!

Someone please help me out!!!!

推荐答案

通过使用不同的id并分别调用每个id来找到解决方案，如下所示:

Found a solution by working with different ids and calling each separately as shown below:

<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代码

javascript code

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

这篇关于一页上需要多个elastislide图像查看器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！