근무 예 : http://jsfiddle.net/Gajotres/B7hwh/
먼저 제가 한 일을 말할 수 있습니다. 문서 준비 (또는 익명 verion)는 jQuery Mobile과 함께 사용하면 안됩니다. 페이지 초기화 중에 올바르게 실행되지 않기 때문입니다. 보통 문제는 아니지만 여기에 있습니다.
특정 페이지 안에서 초기화해야하기 때문에 문서를 제거하고 올바른 페이지 이벤트로 바 꾸었습니다. HTML 및 BODY 태그에 코드를 래핑했습니다. 페이지 이벤트가 jsFiddle 없이도 작동하도록 만들 수는 없습니다.
또 다른 변경 사항은 페이지를 다시 방문 할 때마다 페이지 표시가 발생하기 때문에 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>
자바 스크립트 :
$(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;
}
어떤 데모를 사용했는지 보여 줄 수 있습니까? – Gajotres
감사합니다 4 답장, 위의 바이올린 링크를 첨부했습니다 ... – SaurabhLP
당신은 저에게 당신이 복제하려고하는 특정 스와이퍼 데모를 보여 줄 수 있는지 궁금합니다. 올바른 최종 결과가 무엇인지보고 싶습니다. – Gajotres