I am building a jquery mobile webpage . I use swiper slider plug in for image gallery. But navigation buttons and and pagination not works correctly without reloading page. When visitors enter the sixth page.
I just want to automatically refresh only that page and only once. My image gallery in that page already. My html codes like this. I guess we can do reloading webpage with java script codes. But although I do a lot of research, i could not find the solution. I will be grateful if you can help me.
<div data-role="page" id="page6">
<div data-role="header">
<div class="logo"></div>
<div class="blueline"></div>
</div>
<div data-role="content" class="bodycopy"><center>Resimleri Görmek İçin Yukarı Kaydırın</center>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" ><img src="images/image-1.jpg" alt="resim-1"></div>
<div class="swiper-slide" ><img src="images/image-2.jpg" alt="resim-2"></div>
<div class="swiper-slide" ><img src="images/image-3.jpg" alt="resim-3"></div>
<div class="swiper-slide" ><img src="images/image-4.jpg" alt="resim-4"></div>
<div class="swiper-slide" ><img src="images/image-5.jpg" alt="resim-5"></div>
<div class="swiper-slide" ><img src="images/image-6.jpg" alt="resim-6"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div data-role="footer" class="footer">
<h4><a href="#page" data-role="button" data-icon="back" data-iconpos="notext">Button</a></h4>
</div>
</div>
As a result of my researches I have found a solution like this:
I divided my jquery mobile website in different pages. Like page1.html, page2.html So I did multiple page website. And created an external .js file for swiper slider. I put the .js link on end of body tag which page includes swiper slider codes in it.
Every thing is okay now. It works very well. Before this editing all of the page codes were in same file. Because of this swiper slider did not work correctly. Now i don't need to refresh the page.