Need for multiple elastislide image viewers on one

Question

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

Answer 1

Good solution if you want to have 2 different sliders with their own navigations but if you want to have a single navigation and control both sliders, here is quick snippet that will help you solve it. Hide the elastislide default buttons using display:none like so

.elastislide-prev{
    display: none;
}

.elastislide-next{
    display: none;
}

Add your own custom navigation:

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

In the elastislide js:

Add the following to _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;
} );

That'll help you slide 2 sliders with one click creating a really nice effect of grid carousel.

Answer 2

just use class instead of id,like below one

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

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

use short one like this

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

Answer 3

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>

Answer 4

I used class instead of id, but still no. 2 slider did not work. However, using jquery each, it worked:

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