<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<h2>Multi Slide Bootstrap 3 Silder with touch enabled and Mobile Responsive</h2>
</div>
<div class="col=md-12 col-sm-12 col-xs-12">
<div id="myCarousel" class="custom-carousel carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="col-md-4 col-sm-6 col-xs-12">
<img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" class="img-responsive center-block" alt="Some text">
</div>
</div>
<div class="item">
<div class="col-md-4 col-sm-6 col-xs-12">
<img src="https://images.unsplash.com/photo-1551263640-1c007852f616?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" class="img-responsive center-block" alt="Some Text">
</div>
</div>
<div class="item">
<div class="col-md-4 col-sm-6 col-xs-12">
<img src="https://images.unsplash.com/photo-1550867788-8d7e72ea8c62?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80" class="img-responsive center-block" alt="Some Text">
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
.custom-carousel .item{cursor:pointer;}
.custom-carousel .carousel-inner > .item.active.right,
.custom-carousel .carousel-inner > .item.next {
-webkit-transform: translate3d(33.33%, 0, 0);
-moz-transform: translate3d(33.33%, 0, 0);
-o-transform: translate3d(33.33%, 0, 0);
transform: translate3d(33.33%, 0, 0);
left: 33.33%;
left: 0;
}
.custom-carousel .carousel-inner > .item.active.left,
.custom-carousel .carousel-inner > .item.prev {
-webkit-transform: translate3d(-33.33%, 0, 0);
transform: translate3d(-33.33%, 0, 0);
left: -33.33%;
left: 0;
}
.custom-carousel .carousel-inner > .item.left,
.custom-carousel .carousel-inner > .item.prev.right,
.custom-carousel .carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
@media screen and (max-width:991px) {
.custom-carousel .carousel-inner > .item.next {
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0);
left: 50%;
left: 0;
}
.custom-carousel .carousel-inner > .item.active.left,
.custom-carousel .carousel-inner > .item.prev {
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
left: -50%;
left: 0;
}
.custom-carousel .carousel-inner > .item.left,
.custom-carousel .carousel-inner > .item.prev.right,
.custom-carousel .carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
}
@media screen and (max-width:767px) {
.custom-carousel .carousel-inner > .item.next {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
left: 100%;
left: 0;
}
.custom-carousel .carousel-inner > .item.active.left,
.custom-carousel .carousel-inner > .item.prev {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
left: -100%;
left: 0;
}
.custom-carousel .carousel-inner > .item.left,
.custom-carousel .carousel-inner > .item.prev.right,
.custom-carousel .carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".custom-carousel").swipe({
swipe: function(event, direction, distance, duration, fingerCount, fingerData) {
if (direction == 'left') $(this).carousel('next');
if (direction == 'right') $(this).carousel('prev');
},
allowPageScroll:"vertical"
});
// This will fire when document is ready:
$(window).resize(function() {
// This will fire each time the window is resized:
if($(window).width() >= 992) {
$('.custom-carousel .item').each(function(){
var itemToClone = $(this);
for (var i=1;i<3;i++) {
itemToClone = itemToClone.next();
// wrap around if at end of item collection
if (!itemToClone.length) {
itemToClone = $(this).siblings(':first');
}
// grab item, clone, add marker class, add to collection
itemToClone.children(':first-child').clone()
.addClass("cloneditem-"+(i))
.appendTo($(this));
}
});
}
else if($(window).width() >= 768){
$('.custom-carousel .item').each(function(){
var itemToClone = $(this);
for (var i=1;i<2;i++) {
itemToClone = itemToClone.next();
// wrap around if at end of item collection
if (!itemToClone.length) {
itemToClone = $(this).siblings(':first');
}
// grab item, clone, add marker class, add to collection
itemToClone.children(':first-child').clone()
.addClass("cloneditem-"+(i))
.appendTo($(this));
}
});
}
else if($(window).width() <= 767){
$('.custom-carousel .item').each(function(){
var itemToClone = $(this);
for (var i=1;i<1;i++) {
itemToClone = itemToClone.next();
// wrap around if at end of item collection
if (!itemToClone.length) {
itemToClone = $(this).siblings(':first');
}
// grab item, clone, add marker class, add to collection
itemToClone.children(':first-child').clone()
.addClass("cloneditem-"+(i))
.appendTo($(this));
}
});
}
}).resize(); // This will simulate a resize to trigger the initial run.
});
</script>
