In this blog, discuss code about make bootstrap carousel slider on mobile left-right swipe only include touchSwipe javascript library.
HTML Code
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <div id="integrationLogo" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#integrationLogo" data-slide-to="0" class="active"></li> <li data-target="#integrationLogo" data-slide-to="1"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"><img src="https://myfreeonlinetools.com/blog/wp-content/uploads/2020/07/html_5_page_structure.jpg"></div> <div class="item"><img src="https://myfreeonlinetools.com/blog/wp-content/uploads/2020/07/image_upload_by_-Jquery_ajax_and_php.jpg"></div> <div class="item"><img src="https://myfreeonlinetools.com/blog/wp-content/uploads/2020/06/create-an-accordion-with-html-and-jquery.jpg"></div> <div class="item"><img src="https://myfreeonlinetools.com/blog/wp-content/uploads/2020/06/jquery-ajax-php-code-for-contact-form.jpg"></div> </div> </div>
JavaScript Libracy
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script> <!-- Include only below libary if you included bootstrap library --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
swipe: function(event, direction, distance, duration, fingerCount, fingerData) {
if(direction == ‘left’){
jQuery(this).carousel(‘next’);
}
if(direction == ‘right’){
jQuery(this).carousel(‘prev’);
}
},
allowPageScroll:”vertical”
});
});
</script>
JavaScript Code
<script text="text/javascript"> jQuery(document).ready(function(){ jQuery('.carousel').swipe({ swipe: function(event, direction, distance, duration, fingerCount, fingerData) { if(direction == 'left'){ jQuery(this).carousel('next'); } if(direction == 'right'){ jQuery(this).carousel('prev'); } }, allowPageScroll:"vertical" }); }); </script>