Working example: http://jsfiddle.net/Gajotres/B7hwh/
First let me tell you what I did. The finished document (or its anonymous version) should not be used with jQuery Mobile, because it will not start correctly during page initialization. This is usually not a problem, but here it is.
Since you need to initialize inside a specific page, I deleted the document and replaced it with the correct page event. I also wrapped your code in HTML and BODY tags, I cannot get page events to work in jsFiddle without it.
Another change, because pages start up every time a page is reviewed, I used to check if swiper already applied its code. I could not use other page events because swiper needs the correct page width and height, and this information can only be successfully calculated during the pagehow event.
Working example: 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"> <div data-role="header"> <h1>Page One</h1> </div> <div data-role="content"> <a href="#slider" data-transition="slide" data-role="button">Go to Slider</a> </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div> <div data-role="page" id="slider"> <div data-role="header" data-position="fixed"> <a href="#page" class="ui-btn-left">Back</a> <h1>Page One</h1> </div> <div data-role="content"> <div role="main" class="main"> <div class="swiper-container swiper-scroll-container"> <div class="swiper-wrapper" > <div class="swiper-slide" style="background:#fff; padding:20px"> <div class="red-slide" style="width:250px; float:left; font-size:25px; line-height:30px; text-align:center"> <p style="color:#fff; font-weight:bold; font-style:italic;">Your dreams come true:) That is a simple single scrollable area! No slides, no nothing, just pure area!</p> </div> <div style="width:300px; float:left; margin-left:20px"> <p>Here goes some text</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum ipsum auctor nulla consectetur sed porta nunc placerat.</p> <p>Nulla dui augue, sollicitudin egestas consequat a, consequat quis neque. Sed at mauris nunc. Donec rutrum leo id risus congue convallis. Maecenas ultrices condimentum velit, nec tincidunt lorem convallis consequat. Nulla elementum consequat quam eu euismod</p> </div> <div style="width:500px; float:left; margin-left:20px"> <p>Here goes wide image</p> <p><img src="http://farm9.staticflickr.com/8183/8362012092_601c3dbf28_n.jpg" /></p> </div> <div class="blue-slide" style="width:350px; float:left; font-size:28px; line-height:30px; text-align:center; margin-left:20px; padding:25px"> <p style="color:#fff; font-weight:bold; font-style:italic;">You can make it any width/height, horizontal (like this one) or vertical, with any styling and with any HTML content!</p> </div> </div> </div> <div class="swiper-scrollbar"></div> </div> </div> <div data-role="footer" data-position="fixed"> <h4>Page Footer</h4> </div> </div> </div> </body> </html>
Javascript:
$(document).on('pageshow', '#slider', function(){ 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 { width: 100%; height: 4px; border-radius: 10px; position: absolute !important; left:0; bottom:auto; top:0 !important; -ms-touch-action: none; background: none } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0,0,0,0.5); border-radius: 10px; }