"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 () - 6 years ago - Reply 3


Awesome work! Thank you!

zoltanwebdesigner (1) - 6 years ago - Reply 1


Great! But how it makes infinite?

Oleksandr Shityi () - 6 years ago - Reply 1


did you find the solution/answer for it?

theusmanabdullah () - 1 month ago - Reply 0


did you find the solution/answer for it?

theusmanabdullah () - 1 month ago - Reply 0


did you find the solution/answer for it?

theusmanabdullah () - 1 month ago - Reply 0


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 () - 6 years 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) - 5 years ago - Reply -1


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

I can't change that , please help me

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


I have use this in my app with bootstrap 3 integrated. It works okay.

Just one question. What need to change/update to make items move in an infinite repeating loop. Like I have an option in bootstrap 5 or other carousals?

Thanks!

theusmanabdullah () - 1 month ago - Reply 0


I have use this in my app with bootstrap 3 integrated. It works okay.

Just one question. What need to change/update to make items move in an infinite repeating loop. Like I have an option in bootstrap 5 or other carousals?

Thanks!

theusmanabdullah () - 1 month ago - Reply 0


I have use this in my app with bootstrap 3 integrated. It works okay.

Just one question. What need to change/update to make items move in an infinite repeating loop. Like I have an option in bootstrap 5 or other carousals?

Thanks!

theusmanabdullah () - 1 month ago - Reply 0


how to make this slider draggable

pratapkhandekar () - 2 years ago - Reply 0


love it

pratapkhandekar () - 2 years ago - Reply 0


how to autoplay this items?

Simalkar () - 3 years ago - Reply 0


Thank You so much that was really helpful

mohammadgld () - 3 years ago - Reply 0


Thank You so much that was extremely helpful

mohammadgld () - 3 years ago - Reply 0


Thank You so much that was extremely helpful !!

mohammadgld () - 3 years ago - Reply 0


Thank You so much that was extremely helpful !!

mohammadgld () - 3 years ago - Reply 0


how to auto play multi carousel item one by one

mohammadaarif () - 3 years ago - Reply 0


thank you

vinhlp32aptech () - 3 years ago - Reply 0


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

maposch () - 3 years ago - Reply 0


how to define number of column?

raiteju () - 4 years 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 () - 4 years 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 years 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 years ago - Reply 0


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

chulhun-hwang () - 5 years ago - Reply 0