idangerous swiper issue with dynamic content

Question

I am applying the idangerous swiper scrollbar plugin on a container whose content is dynamically loaded with ajax, I initialize the plugin after the ajax call, the issue is that the scroll doesn't work until I resize the browser. I have tested it with static content it's working fine, no need to resize the window but once I switch to dynamic content, the scroll won't work unit I resize the browser.

Here's how am initializing the plugin

var mySwiper = new Swiper('.swiper-container', {
        scrollContainer: true,
        mousewheelControl: true,
        mode: 'vertical',            
        scrollbar: {
            container: '.swiper-scrollbar',
            hide: true,
            draggable: false
        }
    });  

here's the html

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="searchList">
                //here's the dynamic content being loaded (a list of div elements)
            </div>
        </div>
    </div>
    <div class="swiper-scrollbar">
    </div>
</div>

swiper-container height is 100%

Answer 1

I found the solution, I added this function which I call after first initializing the plugin

function reinitSwiper(swiper) {
  setTimeout(function () {
   swiper.reInit();
  }, 500);
}

This fix was mentioned in another plugin and when I tried it with this swiper plugin it worked. It has something to do with the plugin not aware of the change that occurred to the DOM.

Answer 2

My fix for Swiper 3.x (I believe the above covers 2.x)

function fixSwiperForIE(swiper) {
    setTimeout(function () {
        swiper.onResize();
    });
}

Answer 3

Updated for Change in Swiper documentation since .reInit is no longer a function.

function reinitSwiper(swiper) {
  setTimeout(function () {
   swiper.update();
  }, 500);
}

Answer 4

I've got a no-JS solution.

HTML

<div class="responsive-swiper-holder">

  <div class="responsive-swiper-shiv"></div>

  <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>
  </div><!-- .swiper-container -->

</div><!-- .responsive-swiper-holder -->

CSS

.responsive-swiper-holder {
  position: relative;
}

.responsive-swiper-shiv {
  padding-top: 31.25%;
}

.swiper-container {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
}

.swiper-wrapper, .swiper-slide {
  height: 100%;
}

Consequently this method will also work for making any div size responsively the way an image would. Scaling it's height with a locked aspect ratio of it's width.

The magic is that browsers treat margin/padding % values as a percentage of the width of the element even if you are padding the top or bottom of said element.

Hope this helps!

Answer 5

I just wanted to add that I also had trouble getting Swiper to work with dynamically loaded content through ajax. This is quite obviously because the content wasn't loaded yet when Swiper was intiated. I solved this by using swiper's own appending function instead of my own. This was on version 3.3.1, and it fixed it for me without needing to use setTimeout() or anything!

//quick and dirty creation of html to append
var imgHTML = "";
  $.each(imgArray, function (i, url) {
    imgHTML += '<div class="swiper-slide"><img src="' + url + '" alt=""/></div>';
  });

  //initiate swiper
  var mySwiper = new Swiper('.swiper-container', {
    // Optional parameters
    loop: true,
    autoHeight: true
  });

  mySwiper.appendSlide(imgHTML); //append the images
  mySwiper.update(); //update swiper so it redoes the bindings
  });

I hope this helps some people in need!