Swiper: Multiple sliders not working inside Bootstrap Tabs

[diegocardoso213]

Hello guys,

I have one problem happening on a project and I cannot seem to find the proper answer/fix for it. I even
created a thread, but it got closed for no reason and I get no response, and also found one kind of similar answer through the threads on this forum, but it wasn't the right fix for my issue.

My problem is described below, hope any of you can help me! =)

======================================================

This is a (multiple allowed):

• bug

Swiper Version: 4.0.3

Platform/Target and Browser Versions: Multiple Platforms (PC)

Live Link or JSFiddle/Codepen or website with isssue: http://imovel-cia.com.br/empreendimentos/canvas-alphaville-high-houses-apartamentos-270-338-metros-alameda-cauaxi-purus-em-frente-ao-alphaville-2

JS file used to initialize the slider: http://imovel-cia.com.br/assets/site/redesign/assets/js/imovel.js

What you did
I have a group of tabs running inside this type of page, inside my project. It's a structured page, to be dynamically created for multiple instances of data (called from my DB). I have 4 tabs and the ones called "Plantas" and "Ilustrações" (2nd and 3rd), have Swiper sliders instances created for each one of them.

Expected Behavior
All sliders inside those tabs should have their effect working properly (prev-next buttons).

Actual Behavior
When both tabs have Swiper instances, only one of them work. The other one is only draggable, but loses its pagination between images and all the effects inherited from the original script. It happens when Swiper Sliders are created on both tabs. If only one has a slider instance, it works fine, but not when multiple tabs have sliders inside of them. =/

One important note: they work fine on mobile, but on my PC, on every browser that I've tried, they're working as I said above.

Can I get any help? Thanks in advance, guys!

[nolimits4web]

It happens because Swiper on the moment of initialization is hidden (in hidden tab), so it can't correctly calculate its own sizes to do the things properly. You need to:

• init it when the tab what contains this swiper becomes visible/active
• or call its .update method when the tab what contains this swiper becomes visible/active
• or try to enable observer and observeParents parameters

[gimler]

Run into the same bug today and found https://vissense.github.io/vissense/

        VisSense(mySwiper.el).monitor({
            visible: function() {
                mySwiper.update();
            },
        }).start();

[lmerkens]

I stumbled upon a similar problem (with my own tab solution). Calling .update() on activating a tab works fine, but it seems to ignore the responsive break-points, if the window.size changed between tab switches.

[cfxd]

I create a simple listener for the shown.bs.tab event and then update() only if necessary. Seems to work quite well. Here's my JS:

var mySwiper = new Swiper('.swiper-container', {
  loop: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
  var paneTarget = $(e.target).attr('href');
  var $thePane = $('.tab-pane' + paneTarget);
  var paneIndex = $thePane.index();
  if ($thePane.find('.swiper-container').length > 0 && 0 === $thePane.find('.swiper-slide-active').length) {
    mySwiper[paneIndex].update();
  }
});

Here's a working jsfiddle: https://jsfiddle.net/silb3r/jhz9tfb7/

[satiroglumustafa]

(firstly ı speak little english, so sorry )@cfxd thank you its worked me, when click to tabs, every slide works, but I has a problem. Example I click to profile tab and then go to cat pic(second picture), and then home tab click back, slide does not start at the place , in other words slider doesnt reinitializied. I do not know if I can understand???

http://95.0.133.245:81/ege/?site=ciftcidenhaber ( This link )

[satiroglumustafa]

Also this stuation doesnt work on pagination? pagination doesnt show tabs

[Luiquecruz]

Run into the same bug today and found https://vissense.github.io/vissense/

        VisSense(mySwiper.el).monitor({
            visible: function() {
                mySwiper.update();
            },
        }).start();

Worked perfectly for me! Thanks

[NetPax]

I have the same issue but what if I initialise slider dynamicly with this code:
$('.results-tab-slider').each(function(){ new Swiper($(this), { slidesPerView: 2, spaceBetween: 70, loop: true, breakpoints: { 767: { slidesPerView: 1 }, 1024: { slidesPerView: 2 }, 1270: { slidesPerView: 1 } }, navigation: { prevEl: $(this).siblings('.results-tab-button-prev'), nextEl: $(this).siblings('.results-tab-button-next'), } }); });

Unfortunately we loose ability to use mySwiper.update();

[JLueke]

@NetPax you can access the Swiper instance afterwards, with .swiper.
Last I testet, it only works with JS, not jQuery:
document.querySelector('selector-for-an-element-with-swiper').swiper.update()

[jer0dh]

Found that @cfxd code worked great with bootstrap tabs except discovered that sliders with thumbnails and lazy loading did not work. The main slider would be fine, but the thumbs would not load the images even with an update(). Used a combination of @JLueke and @cfxd to also add the command to load lazy images.

    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
        var paneTarget = $(e.target).attr('href');
        var $thePane = $('.tab-pane' + paneTarget);
        if ($thePane.find('.swiper-container').length > 0 && 0 === $thePane.find('.swiper-slide-active').length) {
           document.querySelectorAll('.tab-pane' + paneTarget + ' .swiper-container').forEach( function(item) {
                  item.swiper.update();
                  item.swiper.lazy.load();
              });
         }
      });

[AmaanKulshreshtha]

As @nolimits4web pointed out in one of the options, initializing the carousel by setting
observer: true and observeParents: true, does the job seamlessly. No extra event listeners needed after that.

Something like this

new Swiper(<selector>, {
 // your other config
  observer: true,
  observeParents: true
}