swiper

Open full view…

Swiper 3.0.6 does not compatible with jquery mobile page markup

Thomas Tong
Wed, 01 Apr 2015 09:24:03 GMT

Swiper 3.0.6 does not compatible with jquery mobile page markup, the code is as below, but when moving "swiper-container" out of "home_page_wrapper" will work prefectly. Would you like to let me know if there is a fix to it? Thanks a lot. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Swiper demo</title> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> <!-- Link Swiper's CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.6/css/swiper.min.css"> <!-- jQuery 2.1.3 --> <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> <!-- jQuery Mobile 1.4.5 --> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" /> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script> <!-- Demo styles --> <style> html, body { position: relative; height: 100%; } body { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color:#000; margin: 0; padding: 0; } .swiper-container { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .swiper-pagination-bullet { width: 20px; height: 20px; text-align: center; line-height: 20px; font-size: 12px; color:#000; opacity: 1; background: rgba(0,0,0,0.2); } .swiper-pagination-bullet-active { color:#fff; background: #007aff; } </style> </head> <body> <div class="home_page_wrapper" data-role="page" id="home_page_id"> <!-- Swiper --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> <div class="swiper-slide">Slide 6</div> <div class="swiper-slide">Slide 7</div> <div class="swiper-slide">Slide 8</div> <div class="swiper-slide">Slide 9</div> <div class="swiper-slide">Slide 10</div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> </div> </div> <!-- Swiper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.6/js/swiper.min.js"></script> <!-- Initialize Swiper --> <script> var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', paginationClickable: true, paginationBulletRender: function (index, className) { return '<span class="' + className + '">' + (index + 1) + '</span>'; } }); </script> </body> </html>

Vladimir Kharlampidi
Wed, 01 Apr 2015 10:21:42 GMT

That is because jqm is really sucks:) if you need to use it on other pages, then init swiper in special jqm events when page with swiper is loaded and became visible, you need to look for smth like pageShow

Fabrice Richard
Wed, 10 Jun 2015 08:58:56 GMT

Hello, I am using JQM 1.4 and swiper and have been facing same issue too. I had to put swiper code into 'pageshow' event function to make it work properly. Vlamdimir, you mentioned that you may not like JQM much.. :-) Do you have other framework in mind being better than JQM where integration with swiper is easy too? Thank you for this nice app by the way! Regards

Vladimir Kharlampidi
Sun, 14 Jun 2015 12:10:27 GMT

> @tiofabby > Vlamdimir, you mentioned that you may not like JQM much.. ) Do you have other framework in mind being better than JQM where integration with swiper is easy too? Sure, this one is very good and Swiper is already part of it: http://idangero.us/framework7/ ;)