Yasmine Yasmine - 1 year ago 542
Javascript Question

idangerous swiper issue with dynamic content

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 class="swiper-scrollbar">

swiper-container height is 100%

Answer Source

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

function reinitSwiper(swiper) {
  setTimeout(function () {
  }, 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.