title: Swiper gallery failing to load with Bootstrap Tabs
body: <p>I'm trying to create a page with two galleries using Swiper javascript templates, and separated by tabs using Bootstrap.  Without the tabs, the galleries load just fine, but with them, the gallery that lives in the inactive tab fails to load.  My best guess is that the gallery's width is set by the size of the containing div, which is 0 when the tab is inactive, but this hasn't lead me to a solution as of yet.  I'll post code from the php file below; if anyone has a solution or workaround to this problem I would greatly appreciate it!</p>
  
  <pre><code>   &lt;div class="row page-header"&gt;
          &lt;h1&gt;Photos&lt;/h1&gt;
          &lt;!-- Nav tabs --&gt;
          &lt;ul class="nav nav-tabs central"&gt;
              &lt;li class="active"&gt;&lt;a href="#interior" data-toggle="tab"&gt;Interior&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#gallery" data-toggle="tab"&gt;Gallery&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;!--Javascript (jQuery) Libraries and Plugins--&gt;
      &lt;script src="js/swiper.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/libs/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/libs/jquery.easing.1.3.js"&gt;&lt;/script&gt;
      &lt;script src="js/plugins/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/plugins/jquery.touchSwipe.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/plugins/jquery.placeholder.js"&gt;&lt;/script&gt;
      &lt;script src="js/plugins/icheck.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/plugins/jquery.validate.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/plugins/gallery.js"&gt;&lt;/script&gt;
      &lt;script src="js/plugins/jquery.fitvids.js"&gt;&lt;/script&gt;
      &lt;script src="js/plugins/jquery.bxslider.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/plugins/chart.js"&gt;&lt;/script&gt;
      &lt;script src="js/plugins/waypoints.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/plugins/smoothscroll.js"&gt;&lt;/script&gt;
      &lt;script src="js/landing2.js"&gt;&lt;/script&gt;
      &lt;div class="container"&gt;
          &lt;div class="row tab-content central"&gt;
              &lt;div class="tab-pane fade in active col-lg-12" id="interior"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="swiper-container-interior swiper-container" id="interior-swiper"&gt;
                          &lt;!-- Additional required wrapper --&gt;
                          &lt;div class="swiper-wrapper"&gt;
                              &lt;!-- Slides --&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/interior/IMG_1879.jpg" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/interior/IMG_1880.jpg" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/interior/IMG_1885.jpg" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/interior/IMG_1886.jpg" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/interior/IMG_1887.jpg" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/interior/IMG_1890.jpg" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/interior/IMG_1891.jpg" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/interior/IMG_1892.jpg" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/interior/IMG_1894.jpg" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/interior/IMG_1897.jpg" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/interior/IMG_1901-Edit.jpg" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/interior/IMG_1903.jpg" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/interior/IMG_1905.jpg" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/interior/IMG_1906.jpg" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/interior/IMG_1907.jpg" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/interior/IMG_9622-Edit.jpg" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/interior/IMG_9623.jpg" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/interior/IMG_9627.jpg" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/interior/IMG_9630.jpg" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/interior/IMG_9725.jpg" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/interior/IMG_9729.jpg" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/interior/IMG_9731.jpg" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/interior/IMG_9736.jpg" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/interior/IMG_9903.jpg" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/interior/IMG_9906.jpg" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/interior/IMG_9907.jpg" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/interior/IMG_9912.jpg" alt=""/&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;!-- If we need pagination --&gt;
                          &lt;div class="swiper-pagination"&gt;&lt;/div&gt;
  
                          &lt;!-- If we need navigation buttons --&gt;
                          &lt;div class="swiper-button-prev"&gt;&lt;/div&gt;
                          &lt;div class="swiper-button-next"&gt;&lt;/div&gt;
  
                          &lt;!-- If we need scrollbar --&gt;
                          &lt;div class="swiper-scrollbar"&gt;&lt;/div&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;script&gt;
                      var interiorSwiper = new Swiper('.swiper-container-interior', {
                          // Optional parameters
                          direction: 'horizontal',
                          loop: true,
                          autoplay: 3000,
                          // If we need pagination
                          pagination: '.swiper-pagination',
  
                          // Navigation arrows
                          nextButton: '.swiper-button-next',
                          prevButton: '.swiper-button-prev',
  
                          // And if we need scrollbar
                          scrollbar: '.swiper-scrollbar',
  
  
                      })
                  &lt;/script&gt;
  
              &lt;/div&gt;
              &lt;div class="tab-pane fade in col-lg-12" id="gallery"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="swiper-container-gallery swiper-container" id="gallery-swiper"&gt;
                          &lt;!-- Additional required wrapper --&gt;
                          &lt;div class="swiper-wrapper"&gt;
                              &lt;!-- Slides --&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/gallery/IMG_9634.JPG" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/gallery/IMG_9657.JPG" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/gallery/IMG_9643.JPG" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/gallery/IMG_9659.JPG" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/gallery/IMG_9666-Edit.JPG" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/gallery/IMG_9675-Edit.JPG" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/gallery/IMG_9694.JPG" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/gallery/IMG_9698.JPG" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/gallery/IMG_9705.JPG" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/gallery/IMG_9708.JPG" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/gallery/IMG_9709.JPG" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/gallery/IMG_9710.JPG" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/gallery/IMG_9718.JPG" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/gallery/IMG_9721.JPG" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/gallery/IMG_9739.JPG" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/gallery/IMG_9752.JPG" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/gallery/IMG_9775.JPG" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/gallery/IMG_9777.JPG" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/gallery/IMG_9780.JPG" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/gallery/IMG_9859.JPG" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/gallery/IMG_9860.JPG" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/gallery/IMG_9870.JPG" alt=""/&gt;
                              &lt;/div&gt;
                              &lt;div class="swiper-slide"&gt;
                                  &lt;img class="slide" src="img/gallery/IMG_9898.JPG" alt=""/&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;!-- If we need pagination --&gt;
                          &lt;div class="swiper-pagination"&gt;&lt;/div&gt;
  
                          &lt;!-- If we need navigation buttons --&gt;
                          &lt;div class="swiper-button-prev"&gt;&lt;/div&gt;
                          &lt;div class="swiper-button-next"&gt;&lt;/div&gt;
  
                          &lt;!-- If we need scrollbar --&gt;
                          &lt;div class="swiper-scrollbar"&gt;&lt;/div&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;script&gt;
                      var gallerySwiper = new Swiper('.swiper-container-gallery', {
                          // Optional parameters
                          direction: 'horizontal',
                          loop: true,
                          autoplay: 3000,
                          // If we need pagination
                          pagination: '.swiper-pagination',
  
                          // Navigation arrows
                          nextButton: '.swiper-button-next',
                          prevButton: '.swiper-button-prev',
  
                          // And if we need scrollbar
                          scrollbar: '.swiper-scrollbar',
  
  
                      })
                  &lt;/script&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>