Home/ Questions/Q 8847393
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T12:10:48+00:00

I found this nifty image slider: http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/ Since im developing an events site with

  • 0

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

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>

Here the script:

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

Someone please help me out!!!!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 code

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