0
Swiperのjavascriptテンプレートを使用して2つのギャラリーでページを作成しようとしていて、ブートストラップを使用してタブで区切っています。タブがなければ、ギャラリーはうまくロードされますが、非アクティブなタブにあるギャラリーは読み込まれません。私の最高の推測では、ギャラリーの幅はタブが非アクティブなときに0であるdivのサイズによって設定されますが、まだ解決策には至っていません。私は下のPHPファイルからコードを投稿します。もし誰かがこの問題に対する解決法や回避策を持っていれば、私は大いに感謝します！Bootstrapタブでスワイパーギャラリーが読み込まれない
<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>