83522

iDangero.us Swiper multiple instances

Question:

I'm trying to add multiple swipers (<a href="http://www.idangero.us/swiper/" rel="nofollow">http://www.idangero.us/swiper/</a>) on my site. I want to add the swipers dynamic so i use the same class for every swiper. Each swiper looks like this:

<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> Slide 1 </div> <div class="swiper-slide"> Slide 2 </div> <div class="swiper-slide"> Slide 3 </div> <div class="swiper-slide"> Slide 4 </div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> <!-- Add Arrows --> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div>

If i want to initialize just one swiper everything works fine with this code:

var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', paginationClickable: '.swiper-pagination', nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', loop: true });

What i want is to instantiate multiple swipers on one page, like this:

var swipes = []; $('.swiper-container').each(function(i, obj){ swipes[i] = new Swiper(obj, { pagination: '.swiper-pagination', paginationClickable: '.swiper-pagination', nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', loop: true }); });

But this doesn't work for me. I think the propertys are causing problems. Maybe i should do something like this to be more specific and just use to pagination / nextButton / ... inside the current swiper and not on the whole site:

pagination: obj + '.swiper-pagination', paginationClickable: obj + '.swiper-pagination', nextButton: obj + '.swiper-button-next', ...

But i don't know exactly how to do it. How can i do this?

Answer1:

you need to do something like:

$('.swiper-container').each(function(){ new Swiper($(this), { pagination: $(this).find('.swiper-pagination'), paginationClickable: $(this).find('.swiper-pagination'), nextButton: $(this).find('.swiper-button-next'), prevButton: $(this).find('.swiper-button-prev'), loop: true }); });

Recommend

  • C# - Pan cursor
  • How to change the color of a check mark or 'more' arrow on a WinForms context menu?
  • Using STAT relation in CActiveDataProvider criteria
  • Filtering and paging
  • Angular Material - Getting index of row in data table
  • addEventHandler() in a loop has unexpected results
  • Restore view state without animating segue
  • Ionic Decrease Scroll Speed
  • jQuery Custom Radio Buttons not working as radio buttons
  • Index 1 is either negative or above rows count
  • Standard keys functions in curses module
  • JQuery Mobile: data-direction=“reverse” not emulating initial transition
  • didSelectRowAtIndexPath method at PFQueryTableViewController
  • ReplaceWith carousel-inner with new items
  • How to push ViewController with slide effect from left to right? Animation name required
  • Transition height onload of d3js rect svg
  • Bootstrap Carousel Next/Prev not working
  • Cannot style mat-tab without ::ng-deep and !important
  • reduce/reduce conflicts using ocamlyacc
  • Table striping rows in CSS Grid
  • ZipList with Scalaz
  • C#: Import/Export Settings into/from a File
  • abstracting over a collection
  • Syntax error on tokens, AnnotationName expected instead - error on query
  • JSR-330 support in Picocontainer : @Inject … @Named(\"xxx)
  • How can I display the parent menu item's description using Wordpress walkers?
  • Android fill_parent issue
  • jquery mobile loadPage not working
  • Properly structure and highlight a GtkPopoverMenu using PyGObject
  • What do the 'size' numbers mean in the windbg !heap output?
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • JTable with a ScrollPane misbehaving
  • Angular 2 constructor injection vs direct access
  • Java static initializers and reflection
  • Android Google Maps API OnLocationChanged only called once
  • 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?