I am using jquery mobile just for the swipe ability for the carousels on the page.
But for some reason when you visit different pages on the site, it keeps (caches?) the previous page data and adds the new data to the bottom of the new page.
Is there some way disable this in jquery mobile? or is there an alternate way to enable swipe to change the carousel slides?
jquery mobile script to swipe slides.
// Mobile Swipe
$j("#main-slider, #testimonial-slider").swiperight(function() {
$j(this).carousel('prev');
});
$j("#main-slider, #testimonial-slider").swipeleft(function() {
$j(this).carousel('next');
});
jquery mobile files enqueued via wordpress functions file along with bootstrap fontawesome and my custom scripts.
function resources() {
wp_enqueue_style('bootstrap', get_template_directory_uri() . '/assets/bootstrap/css/bootstrap.min.css');
wp_enqueue_style('fontawesome', get_template_directory_uri() . '/assets/fontawesome/web-fonts-with-css/css/fontawesome-all.min.css');
wp_enqueue_style('main', get_template_directory_uri() . '/css/style.css');
wp_enqueue_script( 'jquery-mobile-js', get_template_directory_uri() . '/assets/jq-mobile/jquery.mobile-1.4.5.min.js', array('jquery'), '3.3.1' );
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/assets/bootstrap/js/bootstrap.min.js', array('jquery'), '3.3.1', true );
wp_enqueue_script( 'fontawesome-js', get_template_directory_uri() . '/assets/fontawesome/svg-with-js/js/fontawesome-all.min.js', array('jquery'), '3.3.1', true );
wp_enqueue_script( 'scripts-js', get_template_directory_uri() . '/js/scripts.js', array('jquery'), '3.3.1', true );
}
add_action('wp_enqueue_scripts', 'resources');
Found an alternate solution: https://github.com/maaaaark/bcSwipe/blob/master/jquery.bcSwipe.min.js
This person wrote this specifically for Bootstrap 4 Carousel Mobile Swipe.
No need tp use jquery-mobile.js.
Note: if you are using wordpress like I am keep in mind you will need to use jQuery.noConflict();