jb37
Reputation: 155
Swiper gallery failing to load with Bootstrap Tabs
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!
<div class="row page-header">
<h1>Photos</h1>
<!-- Nav tabs -->
<ul class="nav nav-tabs central">
<li class="active"><a href="#interior" data-toggle="tab">Interior</a></li>
<li><a href="#gallery" data-toggle="tab">Gallery</li>
</ul>
</div>
<!--Javascript (jQuery) Libraries and Plugins-->
<script src="js/swiper.min.js"></script>
<script src="js/libs/jquery-1.10.2.min.js"></script>
<script src="js/libs/jquery.easing.1.3.js"></script>
<script src="js/plugins/bootstrap.min.js"></script>
<script src="js/plugins/jquery.touchSwipe.min.js"></script>
<script src="js/plugins/jquery.placeholder.js"></script>
<script src="js/plugins/icheck.min.js"></script>
<script src="js/plugins/jquery.validate.min.js"></script>
<script src="js/plugins/gallery.js"></script>
<script src="js/plugins/jquery.fitvids.js"></script>
<script src="js/plugins/jquery.bxslider.min.js"></script>
<script src="js/plugins/chart.js"></script>
<script src="js/plugins/waypoints.min.js"></script>
<script src="js/plugins/smoothscroll.js"></script>
<script src="js/landing2.js"></script>
<div class="container">
<div class="row tab-content central">
<div class="tab-pane fade in active col-lg-12" id="interior">
<div class="row">
<div class="swiper-container-interior swiper-container" id="interior-swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<img class="slide" src="img/interior/IMG_1879.jpg" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/interior/IMG_1880.jpg" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/interior/IMG_1885.jpg" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/interior/IMG_1886.jpg" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/interior/IMG_1887.jpg" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/interior/IMG_1890.jpg" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/interior/IMG_1891.jpg" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/interior/IMG_1892.jpg" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/interior/IMG_1894.jpg" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/interior/IMG_1897.jpg" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/interior/IMG_1901-Edit.jpg" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/interior/IMG_1903.jpg" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/interior/IMG_1905.jpg" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/interior/IMG_1906.jpg" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/interior/IMG_1907.jpg" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/interior/IMG_9622-Edit.jpg" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/interior/IMG_9623.jpg" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/interior/IMG_9627.jpg" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/interior/IMG_9630.jpg" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/interior/IMG_9725.jpg" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/interior/IMG_9729.jpg" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/interior/IMG_9731.jpg" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/interior/IMG_9736.jpg" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/interior/IMG_9903.jpg" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/interior/IMG_9906.jpg" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/interior/IMG_9907.jpg" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/interior/IMG_9912.jpg" alt=""/>
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
</div>
<script>
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',
})
</script>
</div>
<div class="tab-pane fade in col-lg-12" id="gallery">
<div class="row">
<div class="swiper-container-gallery swiper-container" id="gallery-swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<img class="slide" src="img/gallery/IMG_9634.JPG" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/gallery/IMG_9657.JPG" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/gallery/IMG_9643.JPG" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/gallery/IMG_9659.JPG" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/gallery/IMG_9666-Edit.JPG" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/gallery/IMG_9675-Edit.JPG" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/gallery/IMG_9694.JPG" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/gallery/IMG_9698.JPG" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/gallery/IMG_9705.JPG" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/gallery/IMG_9708.JPG" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/gallery/IMG_9709.JPG" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/gallery/IMG_9710.JPG" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/gallery/IMG_9718.JPG" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/gallery/IMG_9721.JPG" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/gallery/IMG_9739.JPG" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/gallery/IMG_9752.JPG" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/gallery/IMG_9775.JPG" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/gallery/IMG_9777.JPG" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/gallery/IMG_9780.JPG" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/gallery/IMG_9859.JPG" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/gallery/IMG_9860.JPG" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/gallery/IMG_9870.JPG" alt=""/>
</div>
<div class="swiper-slide">
<img class="slide" src="img/gallery/IMG_9898.JPG" alt=""/>
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
</div>
<script>
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',
})
</script>
</div>
</div>
Upvotes: 0
Views: 1120
Answers (1)
Hua-hsuan
Reputation: 23
Add this code in the script.
observer:true,
observeParents:true
Hope it's work to you
Upvotes: 2
Related Questions
- Is it possible to have the first and last swiper-button-prev/next buttons point to another html file?
- Bootstrap NavBar with left, center or right aligned items
- Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink
- vertical-align with Bootstrap 3
- Swiper: Swipe to next item only with a button and to previous items manually
- idangero.us swiper update tabs on slide swipe