Menu
i am using Swiper by idangero.us with Jquery Mobile...
Here i am using Scroll Container Swiper for a content slider...
Just facing a lot of problem embedding the code together...
http://jsfiddle.net/keuKu/4/embedded/result/
The scrollbar is not appearing as the one in demo and also the scroll is not sticking to the mark where i leave it...
$(function(){
/* Scroll container: */
var sScroll = $('.swiper-scroll-container').swiper({
scrollContainer : true,
scrollbar : {
container : '.swiper-scrollbar'
}
})
})
628
Working example: http://jsfiddle.net/Gajotres/B7hwh/
First let me tell you what I have done. Document ready (or its anonymous verion) should not be used with jQuery Mobile because it will not trigger correctly during page initialization. Usually it is not a problem but here it is.
Because you need it to initialize inside a certain page I have removed document ready and replaced it with a correct page event. I have also wrapped your code into HTML and BODY tags, I can't make page events work in jsFiddle without it.
Another change, because pageshow triggers each time page is revisited I have used if to check if swiper has already applied its code. I couldn't use other page events because swiper need correct page width and height and those info can only be successfully calculated during the pageshow 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(){
/* Scroll container: */
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;
}
A much simpler solution that worked for me was to make a minimal JQuery Mobile page div, with inside it a plain iframe that links to a complex slider page using src="". This way the slider DOM is separate from your main application and it works inside JQM dialogs etc. too.
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
