Multiple swipers on one page about swiper

[nolimits4web]

Hi, i can't see the second "non working" swiper on the page. Add the second swiper and i will take a look

[patriklund]

Sorry, now it´s there.

[nolimits4web]

Ok, its simple. This code:

var mySwiper = new Swiper('.swiper-container', {pagination:'.pagination-sd'}, {
        speed: 750,
        mode: 'horizontal'
    })

will init only one (first) swiper on a page. Add additional unique classes for "swiper-container" and do it like:

var mySwiper1 = new Swiper('.swiper-container1', {pagination:'.pagination-sd'}, {
        speed: 750,
        mode: 'horizontal'
    })
var mySwiper2 = new Swiper('.swiper-container2', {pagination:'.pagination-sd'}, {
        speed: 750,
        mode: 'horizontal'
    })

[patriklund]

Thanks for your help. Now it works like a charm!

[benyitzhaki]

Hi, it would be nice to enable multiple swipers with one class. That way, we could create for example a class named "horizontal-swiper" and initialize it once for all of the elements that has the class as they are all the same. I'm aware that i can just create some kind of "each" loop and give each of them a unique id and initialize them, but i'm loosing that way the option to re-initialize them, change settings and so on using one var.
for example, we could re initialize all of the swiper like this:
var swipers = $(".horizonal-swipers").swiper(); // first initialize the swipers..
// re initialize after something happened
swipers.reInit();

This kind of feature could be a huge advantage for us as developers.

[nolimits4web]

Hi, it is actually already possible in yesterday 1.8.5 update, because now it can accept HTML Element as container on initialization, not only css selector like before. So you can easily use it like:

$('.horizontal-swipers').each(function(){
    $(this).swiper()
})

If you do var swipers = $(".horizonal-swipers").swiper(); then only first will be initialized. That is done because it returns swiper object, not jQuery collection.

Also when initialized with jQuery you can access to Swiper object of current slider like $('.horizontal-swipers').data('swiper')

[benyitzhaki]

thanks, seems neat and clean. i just hope we will find a solution for the "rtl" issue and this is gonna be a perfect solution for my projects

[nolimits4web]

Yeah , "rtl" seems to be a big problem, i look for solution

[benyitzhaki]

maybe it will help you.. "old" swipers have been always developed using "margin-left" attribute.. every-time we have been added any value to the margin-left, the slider moved to the right.. when we developed such things for RTL based sites, we just flipped the behavior and made it depending on "margin-right" and not "margin-left".. i guess that there needs to be a similar adaption (im just not familiar with the webkit swipe feature that you used in this one so im not sure how to flip it).

[nolimits4web]

Ok, will try to reverse values

[LarkinAngel]

Thanks for creating this plugin--I know it will work great once I figure out how to implement changes. I want multiple swipers on one page as part of a gallery, but my efforts to alter the code have fallen short. I'm a beginner, learning as I go trying to create a new responsive website. In addition to the multiple swipers, I want the size to be responsive, but haven't been successful with 100% on width and height. You can see the site here:
http://www.kathleenphelpsdesign.com/mobiletest2b.html#cardfront

I've tried everything I can think of and not post for help, but I can't manage to find a solution on my own. Can you help?

[LarkinAngel]

I figured out the multiple swiper issue, but haven't figured out the height issue. I've updated the link... Saw item #162, does this mean swiper doesn't work yet in these circumstances?

[nolimits4web]

@LarkinAngel Check temporary solution in #162

[minhtranite]

html:

<section id="slider" class="swiper-slider swiper-container"
           data-autoplay="5000" data-loop="true">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
       ....
      </div>
      <div class="swiper-slide">
        ...
      </div>
    </div>
    <ol class="swiper-pagination"></ol>
    <a href="#" class="swiper-control swiper-control-left">
      <i class="fa fa-angle-left"></i>
    </a>
    <a href="#" class="swiper-control swiper-control-right">
      <i class="fa fa-angle-right"></i>
    </a>

    <div class="swiper-loading">
      <i class="fa fa-spinner fa-spin fa-3x"></i>
    </div>
  </section>

(function ($) {
  $(function () {
    var swiperSliderContainer = $('.swiper-slider');
    if (swiperSliderContainer.length == 0) return;
    swiperSliderContainer.each(function () {
      var $this = $(this);
      var options = {
        loop: true,
        calculateHeight: true
      };
      $.extend(options, $this.data());
      var loading = $('.swiper-loading', $this);
      if ($('.swiper-pagination', $this).length != 0) {
        var paginationClass = 'swiper-pagination-' + $this.index();
        $('.swiper-pagination', $this).addClass(paginationClass);
        var pagination = '.' + paginationClass;
        $.extend(options, {
          pagination: pagination,
          paginationClickable: true
        });
      }
      $this.imagesLoaded(function () {
        loading.hide(0);
        $this.fadeIn();
        var slider = $this.swiper(options);
        var swiperControl = $('.swiper-control', $this);
        if (swiperControl.length != 0) {
          swiperControl.on('click', function (e) {
            $this = $(this);
            e.preventDefault();
            if ($this.hasClass('swiper-control-left')) {
              slider.swipePrev();
            } else {
              slider.swipeNext();
            }
          })
        }
      });
    });
  });
})(jQuery);

I use this code for my site it work but when i click on any control or pagination swiper don't continue autoplay. (I use swiper 2.5.1)

[ThomasJanotta]

Hi nolimits4web
with your code to init multiple swipers (each function .. $(this).swiper()) ...
how can i add the plugin hashnav and then have different links for the single slides like
( from another post if you with
$('a[data-slide]').click(function(e) - mySwiper.swipeTo( $(this).data('slide') ); )
swiper 1
link 1 link 2
swiper 2
link 1 link 2
Thanks (swiper 2.6.1)

[ThomasJanotta]

Hi in the demos i found the "tabs-feedback",
that's exactly what i want, thank you.
Tom.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.