title: Two swiper sliders on one page
body: <p>I am using <a href="http://idangero.us/swiper" rel="nofollow noreferrer">swiper slider</a> on my page.</p>
  
  <p>Now i want add another one. I was copied first slider and change his class the same thing i do with js initialization. Both sliders work but in second slider looks like configuration parameters are ignored... I have 1 visible slide not 10, spaceBetween parameter not changing anything i set 1 or 500 nothing...</p>
  
  <p>What i doing wrong?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="swiper-container slider1"&gt;
      &lt;div class="swiper-wrapper"&gt;
          &lt;div class="swiper-slide"&gt;
              slide 1  
          &lt;/div&gt;
          &lt;div class="swiper-slide"&gt;
              slide 2  
          &lt;/div&gt;
          ...
      &lt;/div&gt;
      &lt;!-- Add Arrows --&gt;
      &lt;div class="swiper-button-next"&gt;&lt;/div&gt;
      &lt;div class="swiper-button-prev"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="swiper-container slider2"&gt;
      &lt;div class="swiper-wrapper"&gt;
          &lt;div class="swiper-slide"&gt;
              slide 1  
          &lt;/div&gt;
          &lt;div class="swiper-slide"&gt;
              slide 2  
          &lt;/div&gt;
          ...
      &lt;/div&gt;
      &lt;!-- Add Arrows --&gt;
      &lt;div class="swiper-button-next"&gt;&lt;/div&gt;
      &lt;div class="swiper-button-prev"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var swiper = new Swiper('.slider1', {
      slidesPerView: 3,
      paginationClickable: true,
      lazyLoading: true,
      spaceBetween: 10,
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev'
  });
  
  var newSwiper = new Swiper('.slider2', {
      slidesPerView: 10,
      paginationClickable: true,
      lazyLoading: true,
      spaceBetween: 10,
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev'
  });
  </code></pre>
  
  <h2>EDIT:</h2>
  
  <p>So problem was - html swiper slider was in bootstrap class <code>tab-pane</code> it is <a href="https://getbootstrap.com/docs/3.3/components/#nav-tabs" rel="nofollow noreferrer">bootstrap tabs</a> so it was hidden and after click on tab it was show up.</p>
  
  <p>So original js for second slider:</p>
  
  <pre><code>var newSwiper = new Swiper('.slider2', {
      slidesPerView: 10,
      paginationClickable: true,
      lazyLoading: true,
      spaceBetween: 10,
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev'
  });
  </code></pre>
  
  <p>and solution:</p>
  
  <pre><code>$(".locality-tab").on("click",function(){ 
      setTimeout(function () {
          newSwiper.update();
      }, 400);
  });
  </code></pre>
  
  <p><code>.locality-tab</code> is class on button whitch switches contents.</p>