Make Bootstrap Carousel Slider on Mobile Left Right Swipe

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>

Leave a Reply

Your email address will not be published. Required fields are marked *