Slider just working on First Page (jQM), but Failed on Page Two, Three and on

Question

Hello everyone, I have problem with Swiper on JQM multipage document.

I'm using Swiper by http://www.idangero.us/sliders/swiper/ in my JQM project.

I can have the slide display and working fine on my First Page of my Multipage JQM document structure. But when ever I try to put the slider to other JQM page other than the First Page, the slides 'Will Load and Display' BUT 'Not Working correctly'.

Description of Not Working Correctly: The loading error will cause incorrect width of the whole slider, the content/list not completely loaded and swipe gesture not working correctly, as it should stop at each slide when swipe/drag left-right.

Please help, thank you.

The following two example, first I load the Swiper on First Page of JQM document and its working as it should:

Here is the JSfiddle for Working Slider [Page One]: http://jsfiddle.net/h73k2/11/




    Your New Application
    
    
    
    
    
    
    

 




    
        Page One
    


    
                
            
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
            
        
        I'm first in the source order so I'm shown as the page.      
        View internal page called Page Two  
    


    
        Page Footer
    







    
        Page Two
    


    
        I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.      
        Back to Page One    
    


    
        Page Footer

JSfiddle for Not-Working Slider [Page Two]: http://jsfiddle.net/jgYGJ/8/

Not working on the following page after moved the Swiper DIV to Page Two:




    Your New Application
    
    
    
    
    
    
    

 




    
        Page One
    


    

        I'm first in the source order so I'm shown as the page.      
        View internal page called Page Two  
    


    
        Page Footer
    







    
        Page Two
    


    
                
            
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
            
        
        I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.      
        Back to Page One    
    


    
        Page Footer

JS to initiate swiper:

$(function(){
    //Featured Slide
    var featuredSwiper = $('.featured').swiper({
        slidesPerView:'auto',
        centeredSlides: true,
        initialSlide:7,
        tdFlow: {
            rotate : 30,
            stretch :10,
            depth: 150
        }
    })

    //Thumbs
    $('.thumbs-cotnainer').each(function(){
        $(this).swiper({
            slidesPerView:'auto',
            offsetPxBefore:25,
            offsetPxAfter:10,
            calculateHeight: true
        })
    })

    //Banners
    $('.banners-container').each(function(){
        $(this).swiper({
            slidesPerView:'auto',
            offsetPxBefore:25,
            offsetPxAfter:10
        })  
    })
})

Code update:

Screenshot of the slider




    Your New Application
    
    
    
    
    
    
    
    
    
    
    
    
    
    

 



    
            Page One

    
    
    
        I'm first in the source order so I'm shown as the page.
        View Slider on Page Two

        
    
    
    
            Page Footer

    
    




    
            Page Two

    
    
    
        I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.
        Back to Page One

        
    
    
    
            Page Footer

Omar · Accepted Answer

You need to initialize "swiper" on pagecontainershow event. This event cant be bound to a specific page, so you need to retrieve active Page's id and compare it with id of the page containing "swiper".

Place the below code in head and don't wrap it in $(function () {});.

$(document).on("pagecontainershow", function () {
    $.mobile.pageContainer.pagecontainer("getActivePage").find('.featured').swiper({
        slidesPerView: 'auto',
        centeredSlides: true,
        initialSlide: 7,
        tdFlow: {
            rotate: 30,
            stretch: 10,
            depth: 150
        }
    });
});

Demo

To retrieve active page's id

$(document).on("pagecontainershow", function () {
  /* page's object */
  var active = $.mobile.pageContainer.pagecontainer("getActivePage");
  /* page's id */
  var activePage = $.mobile.pageContainer.pagecontainer("getActivePage")[0].id;
  if( activePage == "targetPageID") {
    $(".featured", active).swiper({
        slidesPerView: 'auto',
        centeredSlides: true,
        initialSlide: 7,
        tdFlow: {
            rotate: 30,
            stretch: 10,
            depth: 150
        }
    });
  }
});

Demo

Slider just working on First Page (jQM), but Failed on Page Two, Three and on

Answers (1)

Related Questions