"Multiple item Carousel Bootstrap 3 Silder with touch enabled and Mobile Responsive"
Bootstrap 3.3.0 Snippet by webmastermayank

<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>

Related: See More


Questions / Comments: