javascript - Twitter Bootstrap Carousel with Variable/Responsive Number of Elements Shown depending on browser size -

javascript - Twitter Bootstrap Carousel with Variable/Responsive Number of Elements Shown depending on browser size -

i using version v3.1.1 of twitter bootstrap create carousel on website. i able adjust number of items shown in carousel depending on size of browser/device people accessing site. example, if have 15 items, , the browser larger, go through 3 sets of 5 items visible, if smaller, show 5 sets of 3 visible @ time, , if mobile, show 15 sets of 1 visible item... seems simple , mutual request... can't find on stack overflow or googling.

the items of defined dimensions, , can assume they're pretty much this:

<img src="http://placehold.it/150x150">

to give more detail, items in carousels meant "linked previews" invited people click on items find more info them, , have multiple carousels on page displaying items of different types (much youtube or netflix has on websites), it's not appropriate me show constant amount of items per page , adjust each item's height/width/margins in response changing browser dimensions. since don't want adjust dimensions, i'm forced adjust number of items visible.

the number of total objects in set can little (<10) or larger (100's), dynamically grow on time. number of items visible @ time range between 1-6.

sample code bootstrap carousel can found here: http://webdesign.tutsplus.com/articles/twitter-bootstrap-101-the-carousel--webdesign-7442

i've tried following:

bootstrap carousel - i've got set-up properly, looks , behaives carousel. rotates needed, when shrink browser margins eaten up, , visible items end overlapping on 1 another.

owl carousel v2.0.0-beta.2.4 beta- couldn't set-up properly. items ended column regardless of number set right of "items" below:

$('.owl-carousel').owlcarousel({ loop:true, margin:10, nav:true, responsive:{ 0:{ items:1 }, 600:{ items:3 }, 1000:{ items:5 } } })

i've tried responsive carousel here: http://basilio.github.io/responsivecarousel/. able set carousel , set default number of items visible, couldn't figure out modulate in response browser size. tried inspect author's own code behind "example carousels" (because ones on site want) no avail.

when tried bootply samples in next 2 links, couldn't find samples multiple items in carousel , responsive.

(all samples here) http://www.bootply.com/like/carousel+responsive (first ~15 samples here) http://www.bootply.com/like/carousel

lastly, tried bx slider (http://bxslider.com/) , worked charm...mostly. got carousel set , adjusted minslides when made browser narrow... issue show fraction of image, seems how it's programmed , i'm not sure it's such bad thing. i'm using now.

ultimately, i'm not fan of bootstrap's html grammar have cutting total set of items smaller sets opposed other ones can dump al items in div container , have javascript cutting set needed). i'm looking minimize number of css , js files attached site. i'm using bootstrap overall layout, means looking bootstrap solution.

javascript html css twitter-bootstrap carousel