Swiper не работает в Jquery Mobile
Я использую Swiper от idangero.us с Jquery Mobile...
Здесь я использую Scroll Container Swiper для слайдера контента...
Просто сталкиваюсь с большой проблемой встраивания кода вместе...
http://jsfiddle.net/keuKu/4/embedded/result/
Полоса прокрутки не отображается, как в демонстрационной версии, а также прокрутка не придерживается отметки, где я ее оставляю...
$(function(){
/* Scroll container: */
var sScroll = $('.swiper-scroll-container').swiper({
scrollContainer : true,
scrollbar : {
container : '.swiper-scrollbar'
}
})
})
3 ответа
Рабочий пример: http://jsfiddle.net/Gajotres/B7hwh/
Сначала позвольте мне рассказать вам, что я сделал. Документ готов (или его анонимная версия) не следует использовать с jQuery Mobile, поскольку он не будет корректно запускаться во время инициализации страницы. Обычно это не проблема, но вот она.
Так как он нужен для инициализации на определенной странице, я удалил готовый документ и заменил его на правильное событие страницы. Я также обернул ваш код в теги HTML и BODY, я не могу заставить события страницы работать в jsFiddle без него.
Еще одно изменение, потому что pagehow срабатывает каждый раз, когда страница возвращается, я использовал, если проверить, если swiper уже применил свой код. Я не мог использовать другие события страницы, потому что swiper нужна правильная ширина и высота страницы, и эта информация может быть успешно рассчитана только во время события pagehow.
Рабочий пример: 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;
}
Гораздо более простым решением, которое сработало для меня, было создание минимального div страницы JQuery Mobile с внутренним фреймом, который ссылается на сложную страницу слайдера с помощью src="". Таким образом, DOM ползунка отделен от вашего основного приложения и работает внутри диалогов JQM и т. Д.
Я думаю, также некоторые эффекты библиотек jquery ui для swiper на мобильном телефоне. Решил с добавлением задержки.
setTimeout(() => {
var swiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
}, 250);