title: Swiper slider do not work after infinite scroll load more information
body: <p>I'm using <a href="https://swiperjs.com/" rel="nofollow noreferrer">Swiper slider</a> for some images on homepage with <a href="https://infinite-scroll.com/" rel="nofollow noreferrer">infinite scroll</a> to load more information on scrolling on Opencart platform.</p>
  
  <p>The problem is coming when i scrolling down and more content is loaded with infinite scroll than Swiper Slider arrows are not working for the new content </p>
  
  <p>I initialize Swiper in a footer to be sure will be initialize after home is loaded even i do it with loop but still same issue</p>
  
  <p>Any ideas how I can sort out this issue ?</p>
  
  <p>Swiper</p>
  
  <pre><code>$(".swiper-container").each(function(index, element) {
      var swiper = new Swiper('.swiper-container', {
          slidesPerView: 1,
          loop: true,
          navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
          },
          pagination: {
              el: '.swiper-pagination'
          },
          spaceBetween: 10,
      });
  });
  </code></pre>
  
  <p>Infinite scroll</p>
  
  <pre><code> $("#listproduct").addClass("infinitescroll");
   var $container = $('.infinitescroll');
  
   $container.infinitescroll({
       navSelector: ".pagination",
       nextSelector: ".next-pagination",
       itemSelector: ".product-layout",
       history: 'push',
       loading: {
           msgText: "Loading ....",
       }
   },
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I manage to make it work with next changes</p>
  
  <p>Swiper</p>
  
  <pre><code>var options = {
          slidesPerView: 1,
          loop: true,
          navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
          },
          pagination: {
              el: '.swiper-pagination'
          },
          spaceBetween: 10,
      },
  
  swiper = new Swiper('.swiper-container', options);
  </code></pre>
  
  <p>Infinite</p>
  
  <pre><code>$("#listproduct").addClass("infinitescroll");
  var $container = $('.infinitescroll');
  
   $container.infinitescroll({
   navSelector: ".pagination",
   nextSelector: ".next-pagination",
   itemSelector: ".product-layout",
   history: 'push',
   loading: {
       msgText: "Loading ....",
   }
  },function(){
   swiper = new Swiper('.swiper-container', options);
  }
  </code></pre>