jsor
commented
7 years ago I don't have any experience with jQuery Mobile, so i'm not sure i can help much here. From a quick look at the docs, the Pagecontainer Widget triggers beforeshow and beforehide events. You should probably bind to these events and create and destroy the carousels inside the page containers.
I have been using jcarousel but am converting my site to use query mobile. All pages have the same jcarousel at the top but when using JQM default ajax page linking, I cannot get the carousel on subsequent pages to behave. To make it appear on a subsequent page at all, I have to put the initialisation script inside the JQM "page" div but then there are two carousels in the DOM because the host page data is still there and the subsequent page data is just inserted into the DOM by JQM. I use jcarousel.on('jcarousel:reload jcarousel:create', function () { ..... }) to trigger a script that resizes the carousel and number of visible elements to the page but on subsequent pages, this is just updating the original hidden carousel. I can't reference the two carousels specifically because there are many different pages and any one may be fully loaded into the browser first and then ajax linked to any other so the code needs to be generic. Is there a way to make this work with JQM ajax linking of will I need to turn ajax transitions off for the whole site.