Swiper not working in Jquery Mobile

Question

Swiper not working in Jquery Mobile

8.2k Views Asked by SaurabhLP At 06 April 2025 at 10:23

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' 
            }
        })  
     })

Original Q&A

There are 3 best solutions below

EgoistDeveloper On 06 April 2021 at 12:27

I think also some jquery ui libraries effects to swiper on mobile. I solved with adding delay.

setTimeout(() => {
    var swiper = new Swiper('.swiper-container', {
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
}, 250);

user3574281 On 25 April 2014 at 19:24

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.

**Gajotres** · Accepted Answer

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;

    }

Swiper not working in Jquery Mobile

There are 3 best solutions below

Related Questions in JQUERY

Related Questions in CSS

Related Questions in JQUERY-MOBILE

Related Questions in JQUERY-MOBILE-PAGESHOW

Related Questions in SWIPER.JS

Trending Questions

Popular # Hahtags

Popular Questions