"Multi Item Carousel"
Bootstrap 3.3.0 Snippet by pradeep330

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="MultiCarousel" data-items="1,3,5,6" data-slide="1" id="MultiCarousel" data-interval="1000"> <div class="MultiCarousel-inner"> <div class="item"> <div class="pad15"> <p class="lead">Multi Item Carousel</p> <p>₹ 1</p> <p>₹ 6000</p> <p>50% off</p> </div> </div> <div class="item"> <div class="pad15"> <p class="lead">Multi Item Carousel</p> <p>₹ 1</p> <p>₹ 6000</p> <p>50% off</p> </div> </div> <div class="item"> <div class="pad15"> <p class="lead">Multi Item Carousel</p> <p>₹ 1</p> <p>₹ 6000</p> <p>50% off</p> </div> </div> <div class="item"> <div class="pad15"> <p class="lead">Multi Item Carousel</p> <p>₹ 1</p> <p>₹ 6000</p> <p>50% off</p> </div> </div> <div class="item"> <div class="pad15"> <p class="lead">Multi Item Carousel</p> <p>₹ 1</p> <p>₹ 6000</p> <p>50% off</p> </div> </div> <div class="item"> <div class="pad15"> <p class="lead">Multi Item Carousel</p> <p>₹ 1</p> <p>₹ 6000</p> <p>50% off</p> </div> </div> <div class="item"> <div class="pad15"> <p class="lead">Multi Item Carousel</p> <p>₹ 1</p> <p>₹ 6000</p> <p>50% off</p> </div> </div> <div class="item"> <div class="pad15"> <p class="lead">Multi Item Carousel</p> <p>₹ 1</p> <p>₹ 6000</p> <p>50% off</p> </div> </div> <div class="item"> <div class="pad15"> <p class="lead">Multi Item Carousel</p> <p>₹ 1</p> <p>₹ 6000</p> <p>50% off</p> </div> </div> <div class="item"> <div class="pad15"> <p class="lead">Multi Item Carousel</p> <p>₹ 1</p> <p>₹ 6000</p> <p>50% off</p> </div> </div> <div class="item"> <div class="pad15"> <p class="lead">Multi Item Carousel</p> <p>₹ 1</p> <p>₹ 6000</p> <p>50% off</p> </div> </div> <div class="item"> <div class="pad15"> <p class="lead">Multi Item Carousel</p> <p>₹ 1</p> <p>₹ 6000</p> <p>50% off</p> </div> </div> <div class="item"> <div class="pad15"> <p class="lead">Multi Item Carousel</p> <p>₹ 1</p> <p>₹ 6000</p> <p>50% off</p> </div> </div> <div class="item"> <div class="pad15"> <p class="lead">Multi Item Carousel</p> <p>₹ 1</p> <p>₹ 6000</p> <p>50% off</p> </div> </div> <div class="item"> <div class="pad15"> <p class="lead">Multi Item Carousel</p> <p>₹ 1</p> <p>₹ 6000</p> <p>50% off</p> </div> </div> <div class="item"> <div class="pad15"> <p class="lead">Multi Item Carousel</p> <p>₹ 1</p> <p>₹ 6000</p> <p>50% off</p> </div> </div> </div> <button class="btn btn-primary leftLst"><</button> <button class="btn btn-primary rightLst">></button> </div> </div> <div class="row"> <div class="col-md-12 text-center"> <br/><br/><br/> <hr/> <p>Settings</p> <p>Change data items for xs,sm,md and lg display items respectively. Ex:data-items="1,3,5,6"</p> <p>Change data slide for slides per click Ex:data-slide="1"</p> </div> </div> </div>
.MultiCarousel { float: left; overflow: hidden; padding: 15px; width: 100%; position:relative; } .MultiCarousel .MultiCarousel-inner { transition: 1s ease all; float: left; } .MultiCarousel .MultiCarousel-inner .item { float: left;} .MultiCarousel .MultiCarousel-inner .item > div { text-align: center; padding:10px; margin:10px; background:#f1f1f1; color:#666;} .MultiCarousel .leftLst, .MultiCarousel .rightLst { position:absolute; border-radius:50%;top:calc(50% - 20px); } .MultiCarousel .leftLst { left:0; } .MultiCarousel .rightLst { right:0; } .MultiCarousel .leftLst.over, .MultiCarousel .rightLst.over { pointer-events: none; background:#ccc; }
$(document).ready(function () { var itemsMainDiv = ('.MultiCarousel'); var itemsDiv = ('.MultiCarousel-inner'); var itemWidth = ""; $('.leftLst, .rightLst').click(function () { var condition = $(this).hasClass("leftLst"); if (condition) click(0, this); else click(1, this) }); ResCarouselSize(); $(window).resize(function () { ResCarouselSize(); }); //this function define the size of the items function ResCarouselSize() { var incno = 0; var dataItems = ("data-items"); var itemClass = ('.item'); var id = 0; var btnParentSb = ''; var itemsSplit = ''; var sampwidth = $(itemsMainDiv).width(); var bodyWidth = $('body').width(); $(itemsDiv).each(function () { id = id + 1; var itemNumbers = $(this).find(itemClass).length; btnParentSb = $(this).parent().attr(dataItems); itemsSplit = btnParentSb.split(','); $(this).parent().attr("id", "MultiCarousel" + id); if (bodyWidth >= 1200) { incno = itemsSplit[3]; itemWidth = sampwidth / incno; } else if (bodyWidth >= 992) { incno = itemsSplit[2]; itemWidth = sampwidth / incno; } else if (bodyWidth >= 768) { incno = itemsSplit[1]; itemWidth = sampwidth / incno; } else { incno = itemsSplit[0]; itemWidth = sampwidth / incno; } $(this).css({ 'transform': 'translateX(0px)', 'width': itemWidth * itemNumbers }); $(this).find(itemClass).each(function () { $(this).outerWidth(itemWidth); }); $(".leftLst").addClass("over"); $(".rightLst").removeClass("over"); }); } //this function used to move the items function ResCarousel(e, el, s) { var leftBtn = ('.leftLst'); var rightBtn = ('.rightLst'); var translateXval = ''; var divStyle = $(el + ' ' + itemsDiv).css('transform'); var values = divStyle.match(/-?[\d\.]+/g); var xds = Math.abs(values[4]); if (e == 0) { translateXval = parseInt(xds) - parseInt(itemWidth * s); $(el + ' ' + rightBtn).removeClass("over"); if (translateXval <= itemWidth / 2) { translateXval = 0; $(el + ' ' + leftBtn).addClass("over"); } } else if (e == 1) { var itemsCondition = $(el).find(itemsDiv).width() - $(el).width(); translateXval = parseInt(xds) + parseInt(itemWidth * s); $(el + ' ' + leftBtn).removeClass("over"); if (translateXval >= itemsCondition - itemWidth / 2) { translateXval = itemsCondition; $(el + ' ' + rightBtn).addClass("over"); } } $(el + ' ' + itemsDiv).css('transform', 'translateX(' + -translateXval + 'px)'); } //It is used to get some elements from btn function click(ell, ee) { var Parent = "#" + $(ee).parent().attr("id"); var slide = $(Parent).attr("data-slide"); ResCarousel(ell, Parent, slide); } });

Related: See More


Questions / Comments:

love ur work

Jithin Joys () - 3 years ago - Reply 3


Awesome work! Thank you!

zoltanwebdesigner (1) - 2 years ago - Reply 1


please I love to use this work but I am having problem making it to slide automatically after certain interval. Help is appreciated. Jeremiah Thank!

Ochepo Jeremiah () - 2 years ago - Reply 0


Great! But how it makes infinite?

Oleksandr Shityi () - 3 years ago - Reply 0


thanks for this , but I want to set this carousel in RTL mode ,

I can't change that , please help me

unusual (-1) - 2 years ago - Reply -1


thank you

vinhlp32aptech () - 1 month ago - Reply 0


Hey! Great work but is it possible to add a "Sipe" Feature for Mobile? :)

maposch () - 1 month ago - Reply 0


how to define number of column?

raiteju () - 1 year ago - Reply 0


Please notice that in the attribute ' data-items="1,3,5,6" ' you define the cuantity of elements on each media query breakpoint. if you need 2 slides on desktop (>1200px) your data-items will look like ' data-items="1,2,2,2" ' on the MultiCarousel element :)

Manuel-DaSilva () - 1 year ago - Reply 0


Hi could you explain in details ? I would like to know how to define the number of column on each media query breakpoint. I'm using your HTML, CSS and javaScript on the latest Bootstrap version 4.3

yukiyuki () - 4 months ago - Reply 0


Hi, I did not create this Carousel, but you can check on the js file that there is a ResCarouselSize function that handles the item count and element size of the carousel, the attribute 'data-items="1,3,5,6"' provides the quantity of element for each breakpoint on that function, that are:

>=1200px

>= 992 and <= 1200px,

>= 768 and <= 992

<= 922

Just past the needed quantity of elements to each breakpoint, the list on data-item tells wich quantity correspond to each breakpoint because it is in order.

if you set 'data-items="1,3,5,6"', 1 corresponds to "<= 922", 3 corresponds to ">= 768 and <= 992", same for the others two

Manuel-DaSilva () - 4 months ago - Reply 0


Thank you !!! it's perfectly work!!!!!! :)

chulhun-hwang () - 1 year ago - Reply 0


This works well for me, but I want to put an image in each item and the images are different widths. How can I customize the width of each item to match the image?

bradirby () - 1 year ago - Reply 0