For demonstration purposes, you can view a live example here: http://jsfiddle.net/Gajotres/B7hwh/
In my approach, I made some adjustments to the original code. Instead of using document ready in jQuery Mobile, which may not trigger correctly during page initialization, I replaced it with the appropriate page event for proper functioning within a specific page context.
To ensure that the swiper functionality is applied only once and not every time the page is revisited, I utilized the pageshow event along with a conditional check. This was necessary because swiper requires accurate page dimensions, which are best calculated during the pageshow event.
If you want to explore the modified code further or see it in action, feel free to visit the working example provided: http://jsfiddle.net/Gajotres/B7hwh/
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="page">
<!-- Page content goes here -->
</div>
<div data-role="page" id="slider">
<!-- Slider page content goes here -->
</div>
</body>
</html>
Javascript:
$(document).on('pageshow', '#slider', function(){
/* Swiper initialization and configuration */
if($('.swiper-scroll-container .swiper-scrollbar-cursor-drag').length == 0) {
var sScroll = $('.swiper-scroll-container').swiper({
scrollContainer : true,
scrollbar : {
container : '.swiper-scrollbar'
}
});
}
});
CSS:
.swiper-scrollbar {
/* CSS styles for scrollbar */
}
.swiper-scrollbar-drag {
/* CSS styles for scrollbar drag element */
}