0
Swiper javascript şablonlarını kullanarak iki galeri içeren bir sayfa oluşturmaya çalışıyorum ve Bootstrap kullanarak sekmelerle ayrılıyorum. Sekmeler olmadan galeriler çok iyi yüklenir, ancak onlarla birlikte etkin olmayan sekmede yaşayan galeri yüklenemez. En iyi tahminim galerinin genişliği, sekme etkin değilken 0 olan div'in büyüklüğüne göre ayarlanmış olmasıdır, ancak bu bana henüz bir çözüm getirmemiştir. Aşağıdaki php dosyasından kod yayınlayacağım; Eğer bu problemin çözümü ya da çözümü varsa, bunu takdir ediyorum!Swiper galerisi Bootstrap Sekmesi ile yüklenemedi
<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>