77198

Need for multiple elastislide image viewers on one page

Question:

I found this nifty image slider: <a href="http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/" rel="nofollow">http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/</a>

Since im developing an events site with this design: <a href="http://i.stack.imgur.com/Kw4oB.png" rel="nofollow">my webpage design</a>, 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!!!!

Answer1:

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 }); })

Answer2:

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>

Answer3:

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>

Answer4:

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; }

<strong>Add your own custom navigation:</strong>

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

<strong>In the elastislide js:</strong>

<strong>Add the following to _addControls : function() {</strong>

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.

Recommend

  • Trying to update the content of the #content div of a page by clicking a linked image in a jquery sl
  • owl carousel - Set different items number for each of many sliders placed on the same page
  • Bootstrap Carousel v2.0.4 restarts on mouseleave event
  • Materializecss: carousel & slider not working
  • Using glob() to display images from a directory while echo'ing a unique first image
  • Bootstrap Carousel Next/Prev not working
  • Unable to hide youtube iframes in safari?
  • Python PIL to extract number from image
  • Cut the background to expose the layer below
  • Outputting SharePoint Hyperlink Column as URL
  • Uncaught TypeError: $(…).select2 is not a function
  • Disable Kendo Autocomplete
  • Simulate click Geckofx vb,net
  • How to view images from protected folder with php?
  • SharedPreferences or SQLite Database?
  • why xml file does not aligned properly after append the string in beginning and end of the file usin
  • htaccess add www if not subdomain, if subdomain remove www
  • Display images in Django
  • HTTP/2 streams vs HTTP/1.1 connections
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • JSON response opens as a file, but I can't access it with JavaScript
  • Jquery UI tool tip close icon
  • Syntax for setting draggablecursor property in google maps api
  • Using jQuery closest() method with class selector
  • Using $this when not in object context
  • Uncaught Error: Could not find module `ember-load-initializers`
  • HTML download movie download link
  • Accessing IRQ description array within a module and displaying action names
  • Resize panoramic image to fixed size
  • Importing jscolor library in angular 2
  • Jquery - Jquery Wysiwyg return html as a string
  • GridView Sorting works once only
  • How to get icons for entities from eclipse?
  • Programmatically clearing map cache
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?