jQM - Swiper plugin example

by Dragan Gaić

HTML

<link rel="stylesheet" href="http://www.idangero.us/sliders/swiper/css/idangerous.swiper.css">
<link rel="stylesheet" href="http://www.idangero.us/sliders/swiper/css/style.css">
<link rel="stylesheet" href="http://www.idangero.us/sliders/swiper/css/swiper-demos.css">
<script src="http://www.idangero.us/sliders/swiper/js/idangerous.swiper.js"></script>
<script src="http://www.idangero.us/sliders/swiper/js/idangerous.swiper.scrollbar.js"></script>
<!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"...

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;
		
	}

JavaScript

$(document).on('pageshow', '#slider', function(){ 
    /* Scroll container: */
    if($('.swiper-scroll-container .swiper-scrollbar-cursor-drag').length == 0) {
        var sScroll = $('.swiper-scroll-container').swiper({
            scrollContainer : true,
            scrollbar : {
                container : '.swiper-scrollbar'	
            }
        });	    
    }
});