i am working on a webapp working with Swiper JS for my image gallery. Without the usage of Phonegap it works fine, but using Phonegap the "slide" effect doenst work correctly and the prev/next Buttons of the JS were shown but they are not touchable. Curiously it starts working after changing the size of my browser window (firefox). Any ideas?
<!-- Swiper -->
<div class="swiper-container">
<div id="swiper-wrapper" class="swiper-wrapper">
<div id="img0" class="swiper-slide"></div>
<div id="img1" class="swiper-slide"></div>
<div id="img2" class="swiper-slide"></div>
<div id="img3" class="swiper-slide"></div>
<div id="img4" class="swiper-slide"></div>
<div id="img5" class="swiper-slide"></div>
<div id="img6" class="swiper-slide"></div>
<div id="img7" class="swiper-slide"></div>
<div id="img8" class="swiper-slide"></div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30
});
</script>
The images are loaded via DOM
i fixed the issue with the following solution:
loop through my images and add them into the swiper-wrapper:
then intitiate the Swiper:
and after setting the divs attribute display:inherit i had to update the swiper object: