我正在使用 Swiper by idangero.us使用 Jquery Mobile...
我在这里使用 Scroll Container Swiper 作为内容 slider ...
将代码嵌入在一起时遇到很多问题...
http://jsfiddle.net/keuKu/4/embedded/result/
滚动条没有像演示中那样出现，而且滚动条也没有粘在我留下的标记上......
$(function(){
/* Scroll container: */
var sScroll = $('.swiper-scroll-container').swiper({
scrollContainer : true,
scrollbar : {
container : '.swiper-scrollbar'
}
})
})
最佳答案
工作示例:http://jsfiddle.net/Gajotres/B7hwh/
首先让我告诉你我做了什么。 Document ready(或其匿名版本)不应与 jQuery Mobile 一起使用，因为它不会在页面初始化期间正确触发。通常这不是问题，但在这里它是。
因为您需要它在某个页面内进行初始化，所以我已经删除了准备好的文档并将其替换为正确的页面事件。我还将您的代码包装到 HTML 和 BODY 标记中，没有它我无法使页面事件在 jsFiddle 中工作。
另一个变化，因为每次重新访问页面时 pageshow 都会触发我已经使用 if 来检查 swiper 是否已经应用了它的代码。我无法使用其他页面事件，因为滑动器需要正确的页面宽度和高度，而这些信息只能在 pageshow 事件期间成功计算。
工作示例: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;
}
关于jquery - Swiper 在 Jquery Mobile 中不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16496078/