Bootstrap carousel multiple frames at once

Question

This is the effect I m trying to achieve with Bootstrap 3 carousel    Instead of just showing one frame at a time  it displays N frames slide by side  Then when you slide  or when it auto slides   it shifts the group of slides like it does   Can this be done with bootstrap 3 s carousel  I m hoping I won t have to go hunting for yet another jQuery plugin

User · Accepted Answer

Can this be done with bootstrap 3 s carousel  I m hoping I won t have   to go hunting for yet another jQuery plugin   As of 2013-12-08 the answer is no  The effect you are looking for is not possible using Bootstrap 3 s generic carousel plugin  However  here s a simple jQuery plugin that seems to do exactly what you want http   sorgalla com jcarousel

User · Answer

Natively it is overly complicated and messy to achieve this just with Bootstrap 3 4 Carousel and Bootstrap 4 5 Carousel javascript component features  OK so you do not want yet another jQuery plugin    I get that  In my opinion if you re already forced to use jQuery in your project  you might as well have a decent jQuery carousel plugin with lots powerful options  slick js - the last carousel you ll ever need - Ken Wheeler                                                                                                                    lt                                                                          It truly is the last jQuery carousel plugin you will ever need   Here are minified slick js distribution sizes     slick-carousel 1 9 0 slick min css - 1 369 bytes  4 KB on disk  slick-carousel 1 9 0 slick min js - 43 881 bytes  45 KB on disk    Some scenarios you may be faced with     Unfortunately if you are just pulling distributed Bootstrap 3 or 4 js and css minified files from a CDN or where ever  then yeah it s another bulky jQuery plugin added to your website network requests  If you are using NPM  Gulp  Bower or whatever you can just exclude the carousel js and carousel scss to reduce the final compiled sizes of your css and js  Excluding all unused Bootstrap js and scss vendors will help reduced your final compiled outputs anyway    Added bonuses using slick js     Touch swipe to scroll carousel on devices  you can drag on desktop too  Define carousel options for each responsive breakpoint Set mobileFirst  true or false to handle responsive breakpoint direction Set how many slides  columns  you wish to show or scroll  define for each breakpoint  Vertical and horizontal carousels  on events for everything Loads of options     Bootstrap 3 multi column slick carousel example See codepen links below to test examples responsively     codepen io joshmoto pen GRNEBXo - scss example with Bootstrap 3 style arrows and dots codepen io joshmoto pen RwogBJP - same code below simplest example      x000D   x000D     bootstrap 3 breakpoints  const breakpoint          extra small screen   phone   xs  480       small screen   tablet   sm  768       medium screen   desktop   md  992       large screen   large desktop   lg  1200        bootstrap 3 responsive multi column slick carousel     slick   slick     autoplay  true    autoplaySpeed  2000    draggable  true    pauseOnHover  false    infinite  true    dots  false    arrows  false    speed  1000       mobileFirst  true       slidesToShow  1    slidesToScroll  1       responsive           breakpoint  breakpoint xs        settings            slidesToShow  2          slidesToScroll  2                            breakpoint  breakpoint sm        settings            slidesToShow  3          slidesToScroll  3                            breakpoint  breakpoint md        settings            slidesToShow  4          slidesToScroll  4                            breakpoint  breakpoint lg        settings            slidesToShow  5          slidesToScroll  5                       x000D      slick-list emulates  row     slick  slick-list     margin-left  -15px    margin-right  -15px         slick-slide emulates  col-     slick  slick-slide     padding-right  15px    padding-left  15px      slick  slick-slide focus     outline  none    x000D   lt  -- jquery 3 3 -- gt   lt script src  https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt    lt  -- bootstrap 3 4 -- gt   lt link rel  stylesheet  href  https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 4 1 css bootstrap min css  gt   lt script src  https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 4 1 js bootstrap min js  gt  lt  script gt    lt  -- slick 1 9 -- gt   lt link href  https   cdnjs cloudflare com ajax libs slick-carousel 1 9 0 slick min css  rel  stylesheet    gt   lt script src  https   cdnjs cloudflare com ajax libs slick-carousel 1 9 0 slick min js  gt  lt  script gt    lt  -- bootstrap 3 responsive multi column slick carousel example -- gt    lt header gt     lt nav class  navbar navbar-inverse navbar-static-top  gt       lt div class  navbar-header  style  float left important   gt         lt a class  navbar-brand  href     gt Slick in Bootstrap 3 lt  a gt       lt  div gt       lt div class  navbar-text pull-right  style  margin 15px important   gt         lt a class  navbar-link  href  http   kenwheeler github io slick   target   blank  gt Slick Github lt  a gt       lt  div gt     lt  nav gt   lt  header gt    lt main gt     lt div class  container  gt       lt div id  slick  gt          lt div class  slide  gt           lt div class  panel panel-default  gt             lt img src  https   via placeholder com 1600x900  class  img-responsive    gt             lt div class  panel-body  gt               lt h3 style  margin-top 0   gt Article title lt  h3 gt               lt p gt Ut sed ligula vel felis vulputate lobortis id eget mauris  Nullam sollicitudin arcu ac diam ornare  eget iaculis nisl accumsan  lt  p gt               lt button class  btn btn-primary  gt View article lt  button gt             lt  div gt           lt  div gt         lt  div gt          lt div class  slide  gt           lt div class  panel panel-default  gt             lt img src  https   via placeholder com 1600x900  class  img-responsive    gt             lt div class  panel-body  gt               lt h3 style  margin-top 0   gt Article title lt  h3 gt               lt p gt Ut sed ligula vel felis vulputate lobortis id eget mauris  Nullam sollicitudin arcu ac diam ornare  eget iaculis nisl accumsan  lt  p gt               lt button class  btn btn-primary  gt View article lt  button gt             lt  div gt           lt  div gt         lt  div gt          lt div class  slide  gt           lt div class  panel panel-default  gt             lt img src  https   via placeholder com 1600x900  class  img-responsive    gt             lt div class  panel-body  gt               lt h3 style  margin-top 0   gt Article title lt  h3 gt               lt p gt Ut sed ligula vel felis vulputate lobortis id eget mauris  Nullam sollicitudin arcu ac diam ornare  eget iaculis nisl accumsan  lt  p gt               lt button class  btn btn-primary  gt View article lt  button gt             lt  div gt           lt  div gt         lt  div gt          lt div class  slide  gt           lt div class  panel panel-default  gt             lt img src  https   via placeholder com 1600x900  class  img-responsive    gt             lt div class  panel-body  gt               lt h3 style  margin-top 0   gt Article title lt  h3 gt               lt p gt Ut sed ligula vel felis vulputate lobortis id eget mauris  Nullam sollicitudin arcu ac diam ornare  eget iaculis nisl accumsan  lt  p gt               lt button class  btn btn-primary  gt View article lt  button gt             lt  div gt           lt  div gt         lt  div gt          lt div class  slide  gt           lt div class  panel panel-default  gt             lt img src  https   via placeholder com 1600x900  class  img-responsive    gt             lt div class  panel-body  gt               lt h3 style  margin-top 0   gt Article title lt  h3 gt               lt p gt Ut sed ligula vel felis vulputate lobortis id eget mauris  Nullam sollicitudin arcu ac diam ornare  eget iaculis nisl accumsan  lt  p gt               lt button class  btn btn-primary  gt View article lt  button gt             lt  div gt           lt  div gt         lt  div gt          lt div class  slide  gt           lt div class  panel panel-default  gt             lt img src  https   via placeholder com 1600x900  class  img-responsive    gt             lt div class  panel-body  gt               lt h3 style  margin-top 0   gt Article title lt  h3 gt               lt p gt Ut sed ligula vel felis vulputate lobortis id eget mauris  Nullam sollicitudin arcu ac diam ornare  eget iaculis nisl accumsan  lt  p gt               lt button class  btn btn-primary  gt View article lt  button gt             lt  div gt           lt  div gt         lt  div gt                lt div class  slide  gt           lt div class  panel panel-default  gt             lt img src  https   via placeholder com 1600x900  class  img-responsive    gt             lt div class  panel-body  gt               lt h3 style  margin-top 0   gt Article title lt  h3 gt               lt p gt Ut sed ligula vel felis vulputate lobortis id eget mauris  Nullam sollicitudin arcu ac diam ornare  eget iaculis nisl accumsan  lt  p gt               lt button class  btn btn-primary  gt View article lt  button gt             lt  div gt           lt  div gt         lt  div gt          lt div class  slide  gt           lt div class  panel panel-default  gt             lt img src  https   via placeholder com 1600x900  class  img-responsive    gt             lt div class  panel-body  gt               lt h3 style  margin-top 0   gt Article title lt  h3 gt               lt p gt Ut sed ligula vel felis vulputate lobortis id eget mauris  Nullam sollicitudin arcu ac diam ornare  eget iaculis nisl accumsan  lt  p gt               lt button class  btn btn-primary  gt View article lt  button gt             lt  div gt           lt  div gt         lt  div gt          lt div class  slide  gt           lt div class  panel panel-default  gt             lt img src  https   via placeholder com 1600x900  class  img-responsive    gt             lt div class  panel-body  gt               lt h3 style  margin-top 0   gt Article title lt  h3 gt               lt p gt Ut sed ligula vel felis vulputate lobortis id eget mauris  Nullam sollicitudin arcu ac diam ornare  eget iaculis nisl accumsan  lt  p gt               lt button class  btn btn-primary  gt View article lt  button gt             lt  div gt           lt  div gt         lt  div gt          lt div class  slide  gt           lt div class  panel panel-default  gt             lt img src  https   via placeholder com 1600x900  class  img-responsive    gt             lt div class  panel-body  gt               lt h3 style  margin-top 0   gt Article title lt  h3 gt               lt p gt Ut sed ligula vel felis vulputate lobortis id eget mauris  Nullam sollicitudin arcu ac diam ornare  eget iaculis nisl accumsan  lt  p gt               lt button class  btn btn-primary  gt View article lt  button gt             lt  div gt           lt  div gt         lt  div gt        lt  div gt     lt  div gt   lt  main gt  x000D   x000D   x000D    Bootstrap 4 multi column slick carousel example See codepen links below to test example responsively     codepen io joshmoto pen XWNgYYR - scss example with Bootstrap 4 style arrows and dots codepen io joshmoto pen MWboBVQ - same code below simplest example      x000D   x000D     bootstrap 4 breakpoints const breakpoint          small screen   phone   sm  576       medium screen   tablet   md  768       large screen   desktop   lg  992       extra large screen   wide desktop   xl  1200        bootstrap 4 responsive multi column slick carousel     slick   slick     autoplay  true    autoplaySpeed  2000    draggable  true    pauseOnHover  false    infinite  true    dots  false    arrows  false    speed  1000       mobileFirst  true       slidesToShow  1    slidesToScroll  1       responsive           breakpoint  breakpoint sm        settings            slidesToShow  2          slidesToScroll  2                            breakpoint  breakpoint md        settings            slidesToShow  3          slidesToScroll  3                            breakpoint  breakpoint lg        settings            slidesToShow  4          slidesToScroll  4                            breakpoint  breakpoint xl        settings            slidesToShow  5          slidesToScroll  5                       x000D      slick-list emulates  row     slick  slick-list     margin-left  -15px    margin-right  -15px         slick-slide emulates  col-     slick  slick-slide     padding-right  15px    padding-left  15px      slick  slick-slide focus     outline  none    x000D   lt  -- jquery 3 5 -- gt   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 5 1 jquery min js  gt  lt  script gt    lt  -- bootstrap 4 5 -- gt   lt link rel  stylesheet  href  https   cdn jsdelivr net npm bootstrap 4 5 3 dist css bootstrap min css  gt   lt script src  https   cdn jsdelivr net npm popper js 1 16 1 dist umd popper min js  gt  lt  script gt   lt script src  https   cdn jsdelivr net npm bootstrap 4 5 3 dist js bootstrap min js  gt  lt  script gt    lt  -- slick 1 9 -- gt   lt link href  https   cdnjs cloudflare com ajax libs slick-carousel 1 9 0 slick min css  rel  stylesheet  gt   lt script src  https   cdnjs cloudflare com ajax libs slick-carousel 1 9 0 slick min js  gt  lt  script gt    lt  -- bootstrap 4 responsive multi column slick carousel example -- gt        lt header gt     lt nav class  navbar navbar-expand-md navbar-dark bg-dark  gt       lt a class  navbar-brand mr-auto  href     gt Slick in Bootstrap 4 lt  a gt       lt a class  nav-link d-none d-sm-inline  href  http   kenwheeler github io slick   target   blank  gt Slick Github lt  a gt     lt  nav gt   lt  header gt    lt main class  py-4  gt     lt div class  container  gt       lt div id  slick  gt          lt div class  slide  gt           lt div class  card  gt             lt img src  https   via placeholder com 1600x900  class  card-img-top    gt             lt div class  card-body  gt               lt h5 class  card-title  gt Article title lt  h5 gt               lt p class  card-text  gt Ut sed ligula vel felis vulputate lobortis id eget mauris  Nullam sollicitudin arcu ac diam ornare  eget iaculis nisl accumsan  lt  p gt               lt button class  btn btn-primary  gt View article lt  button gt             lt  div gt           lt  div gt         lt  div gt          lt div class  slide  gt           lt div class  card  gt             lt img src  https   via placeholder com 1600x900  class  card-img-top    gt             lt div class  card-body  gt               lt h5 class  card-title  gt Article title lt  h5 gt               lt p class  card-text  gt Ut sed ligula vel felis vulputate lobortis id eget mauris  Nullam sollicitudin arcu ac diam ornare  eget iaculis nisl accumsan  lt  p gt               lt button class  btn btn-primary  gt View article lt  button gt             lt  div gt           lt  div gt         lt  div gt          lt div class  slide  gt           lt div class  card  gt             lt img src  https   via placeholder com 1600x900  class  card-img-top    gt             lt div class  card-body  gt               lt h5 class  card-title  gt Article title lt  h5 gt               lt p class  card-text  gt Ut sed ligula vel felis vulputate lobortis id eget mauris  Nullam sollicitudin arcu ac diam ornare  eget iaculis nisl accumsan  lt  p gt               lt button class  btn btn-primary  gt View article lt  button gt             lt  div gt           lt  div gt         lt  div gt          lt div class  slide  gt           lt div class  card  gt             lt img src  https   via placeholder com 1600x900  class  card-img-top    gt             lt div class  card-body  gt               lt h5 class  card-title  gt Article title lt  h5 gt               lt p class  card-text  gt Ut sed ligula vel felis vulputate lobortis id eget mauris  Nullam sollicitudin arcu ac diam ornare  eget iaculis nisl accumsan  lt  p gt               lt button class  btn btn-primary  gt View article lt  button gt             lt  div gt           lt  div gt         lt  div gt          lt div class  slide  gt           lt div class  card  gt             lt img src  https   via placeholder com 1600x900  class  card-img-top    gt             lt div class  card-body  gt               lt h5 class  card-title  gt Article title lt  h5 gt               lt p class  card-text  gt Ut sed ligula vel felis vulputate lobortis id eget mauris  Nullam sollicitudin arcu ac diam ornare  eget iaculis nisl accumsan  lt  p gt               lt button class  btn btn-primary  gt View article lt  button gt             lt  div gt           lt  div gt         lt  div gt          lt div class  slide  gt           lt div class  card  gt             lt img src  https   via placeholder com 1600x900  class  card-img-top    gt             lt div class  card-body  gt               lt h5 class  card-title  gt Article title lt  h5 gt               lt p class  card-text  gt Ut sed ligula vel felis vulputate lobortis id eget mauris  Nullam sollicitudin arcu ac diam ornare  eget iaculis nisl accumsan  lt  p gt               lt button class  btn btn-primary  gt View article lt  button gt             lt  div gt           lt  div gt         lt  div gt                lt div class  slide  gt           lt div class  card  gt             lt img src  https   via placeholder com 1600x900  class  card-img-top    gt             lt div class  card-body  gt               lt h5 class  card-title  gt Article title lt  h5 gt               lt p class  card-text  gt Ut sed ligula vel felis vulputate lobortis id eget mauris  Nullam sollicitudin arcu ac diam ornare  eget iaculis nisl accumsan  lt  p gt               lt button class  btn btn-primary  gt View article lt  button gt             lt  div gt           lt  div gt         lt  div gt          lt div class  slide  gt           lt div class  card  gt             lt img src  https   via placeholder com 1600x900  class  card-img-top    gt             lt div class  card-body  gt               lt h5 class  card-title  gt Article title lt  h5 gt               lt p class  card-text  gt Ut sed ligula vel felis vulputate lobortis id eget mauris  Nullam sollicitudin arcu ac diam ornare  eget iaculis nisl accumsan  lt  p gt               lt button class  btn btn-primary  gt View article lt  button gt             lt  div gt           lt  div gt         lt  div gt          lt div class  slide  gt           lt div class  card  gt             lt img src  https   via placeholder com 1600x900  class  card-img-top    gt             lt div class  card-body  gt               lt h5 class  card-title  gt Article title lt  h5 gt               lt p class  card-text  gt Ut sed ligula vel felis vulputate lobortis id eget mauris  Nullam sollicitudin arcu ac diam ornare  eget iaculis nisl accumsan  lt  p gt               lt button class  btn btn-primary  gt View article lt  button gt             lt  div gt           lt  div gt         lt  div gt          lt div class  slide  gt           lt div class  card  gt             lt img src  https   via placeholder com 1600x900  class  card-img-top    gt             lt div class  card-body  gt               lt h5 class  card-title  gt Article title lt  h5 gt               lt p class  card-text  gt Ut sed ligula vel felis vulputate lobortis id eget mauris  Nullam sollicitudin arcu ac diam ornare  eget iaculis nisl accumsan  lt  p gt               lt button class  btn btn-primary  gt View article lt  button gt             lt  div gt           lt  div gt         lt  div gt        lt  div gt     lt  div gt   lt  main gt  x000D   x000D   x000D

User · Answer

Reference to above link i added 1 new thing called show 4 at time  slide one at a time for bootstrap 3  v3 3 7   CODEPLY - https   www codeply com go eWUbGlspqU  LIVE SNIPPET   x000D   x000D   function    x000D        carousel123   carousel   interval  2000     x000D        x000D   x000D   function    x000D        carousel-showmanymoveone  item   each function    x000D      var itemToClone     this   x000D   x000D      for  var i 1 i lt 4 i      x000D        itemToClone   itemToClone next    x000D   x000D           wrap around if at end of item collection x000D        if   itemToClone length    x000D          itemToClone     this  siblings   first    x000D          x000D   x000D           grab item  clone  add marker class  add to collection x000D        itemToClone children   first-child   clone   x000D           addClass  cloneditem-   i   x000D           appendTo   this    x000D        x000D        x000D        x000D  body   x000D      margin-top  50px  x000D    x000D   x000D   carousel-showmanymoveone  carousel-control   x000D    width  4   x000D    background-image  none  x000D    x000D   carousel-showmanymoveone  carousel-control left   x000D    margin-left  15px  x000D    x000D   carousel-showmanymoveone  carousel-control right   x000D    margin-right  15px  x000D    x000D   carousel-showmanymoveone  cloneditem-1  x000D   carousel-showmanymoveone  cloneditem-2  x000D   carousel-showmanymoveone  cloneditem-3   x000D    display  none  x000D    x000D   media all and  min-width  768px    x000D     carousel-showmanymoveone  carousel-inner  gt   active left  x000D     carousel-showmanymoveone  carousel-inner  gt   prev   x000D      left  -50   x000D      x000D     carousel-showmanymoveone  carousel-inner  gt   active right  x000D     carousel-showmanymoveone  carousel-inner  gt   next   x000D      left  50   x000D      x000D     carousel-showmanymoveone  carousel-inner  gt   left  x000D     carousel-showmanymoveone  carousel-inner  gt   prev right  x000D     carousel-showmanymoveone  carousel-inner  gt   active   x000D      left  0  x000D      x000D     carousel-showmanymoveone  carousel-inner  cloneditem-1   x000D      display  block  x000D      x000D    x000D   media all and  min-width  768px  and  transform-3d   all and  min-width  768px  and  -webkit-transform-3d    x000D     carousel-showmanymoveone  carousel-inner  gt   item active right  x000D     carousel-showmanymoveone  carousel-inner  gt   item next   x000D      -webkit-transform  translate3d 50   0  0   x000D              transform  translate3d 50   0  0   x000D      left  0  x000D      x000D     carousel-showmanymoveone  carousel-inner  gt   item active left  x000D     carousel-showmanymoveone  carousel-inner  gt   item prev   x000D      -webkit-transform  translate3d -50   0  0   x000D              transform  translate3d -50   0  0   x000D      left  0  x000D      x000D     carousel-showmanymoveone  carousel-inner  gt   item left  x000D     carousel-showmanymoveone  carousel-inner  gt   item prev right  x000D     carousel-showmanymoveone  carousel-inner  gt   item active   x000D      -webkit-transform  translate3d 0  0  0   x000D              transform  translate3d 0  0  0   x000D      left  0  x000D      x000D    x000D   media all and  min-width  992px    x000D     carousel-showmanymoveone  carousel-inner  gt   active left  x000D     carousel-showmanymoveone  carousel-inner  gt   prev   x000D      left  -25   x000D      x000D     carousel-showmanymoveone  carousel-inner  gt   active right  x000D     carousel-showmanymoveone  carousel-inner  gt   next   x000D      left  25   x000D      x000D     carousel-showmanymoveone  carousel-inner  gt   left  x000D     carousel-showmanymoveone  carousel-inner  gt   prev right  x000D     carousel-showmanymoveone  carousel-inner  gt   active   x000D      left  0  x000D      x000D     carousel-showmanymoveone  carousel-inner  cloneditem-2  x000D     carousel-showmanymoveone  carousel-inner  cloneditem-3   x000D      display  block  x000D      x000D    x000D   media all and  min-width  992px  and  transform-3d   all and  min-width  992px  and  -webkit-transform-3d    x000D     carousel-showmanymoveone  carousel-inner  gt   item active right  x000D     carousel-showmanymoveone  carousel-inner  gt   item next   x000D      -webkit-transform  translate3d 25   0  0   x000D              transform  translate3d 25   0  0   x000D      left  0  x000D      x000D     carousel-showmanymoveone  carousel-inner  gt   item active left  x000D     carousel-showmanymoveone  carousel-inner  gt   item prev   x000D      -webkit-transform  translate3d -25   0  0   x000D              transform  translate3d -25   0  0   x000D      left  0  x000D      x000D     carousel-showmanymoveone  carousel-inner  gt   item left  x000D     carousel-showmanymoveone  carousel-inner  gt   item prev right  x000D     carousel-showmanymoveone  carousel-inner  gt   item active   x000D      -webkit-transform  translate3d 0  0  0   x000D              transform  translate3d 0  0  0   x000D      left  0  x000D      x000D    x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  gt  x000D   x000D   lt div class  carousel carousel-showmanymoveone slide  id  carousel123  gt  x000D    lt div class  carousel-inner  gt  x000D     lt div class  item active  gt  x000D      lt div class  col-xs-12 col-sm-6 col-md-3  gt  lt a href     gt  lt img src  http   placehold it 500 0054A6 fff  amp amp text 1  class  img-responsive  gt  lt  a gt  lt  div gt  x000D     lt  div gt  x000D     lt div class  item  gt  x000D      lt div class  col-xs-12 col-sm-6 col-md-3  gt  lt a href     gt  lt img src  http   placehold it 500 002d5a fff  amp amp text 2  class  img-responsive  gt  lt  a gt  lt  div gt  x000D     lt  div gt  x000D     lt div class  item  gt  x000D      lt div class  col-xs-12 col-sm-6 col-md-3  gt  lt a href     gt  lt img src  http   placehold it 500 d6d6d6 333 amp amp text 3  class  img-responsive  gt  lt  a gt  lt  div gt  x000D     lt  div gt            x000D     lt div class  item  gt  x000D      lt div class  col-xs-12 col-sm-6 col-md-3  gt  lt a href     gt  lt img src  http   placehold it 500 002040 eeeeee amp amp text 4  class  img-responsive  gt  lt  a gt  lt  div gt  x000D     lt  div gt  x000D     lt div class  item  gt  x000D      lt div class  col-xs-12 col-sm-6 col-md-3  gt  lt a href     gt  lt img src  http   placehold it 500 0054A6 fff  amp amp text 5  class  img-responsive  gt  lt  a gt  lt  div gt  x000D     lt  div gt  x000D     lt div class  item  gt  x000D      lt div class  col-xs-12 col-sm-6 col-md-3  gt  lt a href     gt  lt img src  http   placehold it 500 002d5a fff  amp amp text 6  class  img-responsive  gt  lt  a gt  lt  div gt  x000D     lt  div gt  x000D     lt div class  item  gt  x000D      lt div class  col-xs-12 col-sm-6 col-md-3  gt  lt a href     gt  lt img src  http   placehold it 500 eeeeee amp amp text 7  class  img-responsive  gt  lt  a gt  lt  div gt  x000D     lt  div gt  x000D     lt div class  item  gt  x000D      lt div class  col-xs-12 col-sm-6 col-md-3  gt  lt a href     gt  lt img src  http   placehold it 500 40a1ff 002040 amp amp text 8  class  img-responsive  gt  lt  a gt  lt  div gt  x000D     lt  div gt  x000D    lt  div gt  x000D    lt a class  left carousel-control  href   carousel123  data-slide  prev  gt  lt i class  glyphicon glyphicon-chevron-left  gt  lt  i gt  lt  a gt  x000D    lt a class  right carousel-control  href   carousel123  data-slide  next  gt  lt i class  glyphicon glyphicon-chevron-right  gt  lt  i gt  lt  a gt  x000D   lt  div gt  x000D   x000D   lt script src  https   code jquery com jquery-3 3 1 min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

try this     it work in mine     code    lt div class  container  gt       lt br gt       lt div id  myCarousel  class  carousel slide  data-ride  carousel  gt           lt  -- Indicators -- gt           lt ol class  carousel-indicators  gt               lt li data-target   myCarousel  data-slide-to  0  class  active  gt  lt  li gt               lt li data-target   myCarousel  data-slide-to  1  gt  lt  li gt               lt li data-target   myCarousel  data-slide-to  2  gt  lt  li gt               lt li data-target   myCarousel  data-slide-to  3  gt  lt  li gt           lt  ol gt            lt  -- Wrapper for slides -- gt           lt div class  carousel-inner  role  listbox  gt               lt div class  item active  gt                   lt div class  span4  style  padding-left  18px   gt                       lt img src  http   placehold it 290x180  class  img-thumbnail  gt                       lt img src  http   placehold it 290x180  class  img-thumbnail  gt                       lt img src  http   placehold it 290x180  class  img-thumbnail  gt                   lt  div gt               lt  div gt               lt div class  item  gt                    lt div class  span4  style  padding-left  18px   gt                       lt img src  http   placehold it 290x180  class  img-thumbnail  gt                       lt img src  http   placehold it 290x180  class  img-thumbnail  gt                       lt img src  http   placehold it 290x180  class  img-thumbnail  gt                   lt  div gt               lt  div gt           lt  div gt           lt a class  right carousel-control  href   myCarousel  role  button  data-slide  next  gt               lt span class  glyphicon glyphicon-chevron-right  aria-hidden  true  gt  lt  span gt               lt span class  sr-only  gt Next lt  span gt           lt  a gt       lt  div gt   lt  div gt

User · Answer

Update 2019-03-06 -- Bootstrap v4 3 1 It seems the new Bootstrap version adds a margin-right  -100  to each item  therefore in the responsive solution given in the most upvoted answer in here  this property should be reset  e g    carousel-inner  carousel-item       margin-right  inherit     A working codepen with v4 3 1 in LESS

User · Answer

I had the same problem and the solutions described here worked well  But I wanted to support window size  and layout  changes  The result is a small library that solves all the calculation  Check it out here  https   github com SocialbitGmbH BootstrapCarouselPageMerger  To make the script work  you have to add a new  lt div gt  wrapper with the class  item-content directly into your  item  lt div gt   Example    lt div class  carousel slide multiple  id  very-cool-carousel  data-ride  carousel  gt       lt div class  carousel-inner  role  listbox  gt           lt div class  item active  gt               lt div class  item-content  gt                  First page              lt  div gt           lt  div gt           lt div class  item active  gt               lt div class  item-content  gt                  Second page              lt  div gt           lt  div gt       lt  div gt   lt  div gt    Usage of this library   socialbitBootstrapCarouselPageMerger run  div carousel      To change the settings   socialbitBootstrapCarouselPageMerger settings spaceCalculationFactor   0 82    Example   As you can see  the carousel gets updated to show more controls when you resize the window  Check out the watchWindowSizeTimeout setting to control the timeout for reacting to window size changes

User · Answer

Updated 2019     Bootstrap 4  The carousel has changed in 4 x  and the multi-slide animation transitions can be overridden like this      carousel-inner  carousel-item-right active   carousel-inner  carousel-item-next     transform  translateX 33 33        carousel-inner  carousel-item-left active    carousel-inner  carousel-item-prev     transform  translateX -33 33       carousel-inner  carousel-item-right   carousel-inner  carousel-item-left     transform  translateX 0       Bootstrap 4 Alpha 6 Demo Bootstrap 4 0 0  show 4  advance 1 at a time  Bootstrap 4 1 0  show 3  advance 1 at a time  Bootstrap 4 1 0  advance all 4 at once  Bootstrap 4 3 1 responsive  show multiple  advance 1 new Bootstrap 4 3 1 carousel with cardsnew    Another option is a responsive carousel that only shows and advances 1 slide on smaller screens  but shows multiple slides are larger screens  Instead of cloning the slides like the previous example  this one adjusts the CSS and use jQuery only to move the extra slides to allow for continuous cycling  wrap around    Please don t just copy-and-paste this code  First  understand how it works   Bootstrap 4 Responsive  show 3  1 slide on mobile    media  min-width  768px            show 3 items         carousel-inner  active       carousel-inner  active    carousel-item       carousel-inner  active    carousel-item    carousel-item           display  block              carousel-inner  carousel-item active not  carousel-item-right  not  carousel-item-left        carousel-inner  carousel-item active not  carousel-item-right  not  carousel-item-left     carousel-item       carousel-inner  carousel-item active not  carousel-item-right  not  carousel-item-left     carousel-item    carousel-item           transition  none              carousel-inner  carousel-item-next       carousel-inner  carousel-item-prev         position  relative        transform  translate3d 0  0  0               carousel-inner  active carousel-item    carousel-item    carousel-item    carousel-item           position  absolute          top  0          right  -33 3333           z-index  -1          display  block          visibility  visible                left or forward direction         active carousel-item-left    carousel-item-next carousel-item-left       carousel-item-next carousel-item-left    carousel-item       carousel-item-next carousel-item-left    carousel-item    carousel-item       carousel-item-next carousel-item-left    carousel-item    carousel-item    carousel-item           position  relative          transform  translate3d -100   0  0           visibility  visible                farthest right hidden item must be abso position for animations         carousel-inner  carousel-item-prev carousel-item-right           position  absolute          top  0          left  0          z-index  -1          display  block          visibility  visible                right or prev direction         active carousel-item-right    carousel-item-prev carousel-item-right       carousel-item-prev carousel-item-right    carousel-item       carousel-item-prev carousel-item-right    carousel-item    carousel-item       carousel-item-prev carousel-item-right    carousel-item    carousel-item    carousel-item           position  relative          transform  translate3d 100   0  0           visibility  visible          display  block          visibility  visible             lt div class  container-fluid  gt       lt div id  carouselExample  class  carousel slide  data-ride  carousel  data-interval  9000  gt           lt div class  carousel-inner row w-100 mx-auto  role  listbox  gt               lt div class  carousel-item col-md-4 active  gt                   lt img class  img-fluid mx-auto d-block  src    placehold it 600x400 000 fff text 1  alt  slide 1  gt               lt  div gt               lt div class  carousel-item col-md-4  gt                   lt img class  img-fluid mx-auto d-block  src    placehold it 600x400 text 2  alt  slide 2  gt               lt  div gt               lt div class  carousel-item col-md-4  gt                   lt img class  img-fluid mx-auto d-block  src    placehold it 600x400 text 3  alt  slide 3  gt               lt  div gt               lt div class  carousel-item col-md-4  gt                   lt img class  img-fluid mx-auto d-block  src    placehold it 600x400 text 4  alt  slide 4  gt               lt  div gt               lt div class  carousel-item col-md-4  gt                   lt img class  img-fluid mx-auto d-block  src    placehold it 600x400 text 5  alt  slide 5  gt               lt  div gt               lt div class  carousel-item col-md-4  gt                   lt img class  img-fluid mx-auto d-block  src    placehold it 600x400 text 6  alt  slide 6  gt               lt  div gt               lt div class  carousel-item col-md-4  gt                   lt img class  img-fluid mx-auto d-block  src    placehold it 600x400 text 7  alt  slide 7  gt               lt  div gt               lt div class  carousel-item col-md-4  gt                   lt img class  img-fluid mx-auto d-block  src    placehold it 600x400 text 8  alt  slide 7  gt               lt  div gt           lt  div gt           lt a class  carousel-control-prev  href   carouselExample  role  button  data-slide  prev  gt               lt i class  fa fa-chevron-left fa-lg text-muted  gt  lt  i gt               lt span class  sr-only  gt Previous lt  span gt           lt  a gt           lt a class  carousel-control-next text-faded  href   carouselExample  role  button  data-slide  next  gt               lt i class  fa fa-chevron-right fa-lg text-muted  gt  lt  i gt               lt span class  sr-only  gt Next lt  span gt           lt  a gt       lt  div gt   lt  div gt    Example - Bootstrap 4 Responsive  show 4  1 slide on mobile  Example - Bootstrap 4 Responsive  show 5  1 slide on mobile     Bootstrap 3  Here is a 3 x example on Bootply  http   bootply com 89193  You need to put an entire row of images in the item active  Here is another version that doesn t stack the images at smaller screen widths  http   bootply com 92514  EDIT Alternative approach to advance one slide at a time   Use jQuery to clone the next items        carousel  item   each function      var next     this  next      if   next length        next     this  siblings   first          next children   first-child   clone   appendTo   this       if  next next   length gt 0        next next   children   first-child   clone   appendTo   this          else         this  siblings   first   children   first-child   clone   appendTo   this              And then CSS to position accordingly     Before 3 3 1   carousel-inner  active left   left  -33      carousel-inner  next          left   33       After 3 3 1   carousel-inner  item left active     transform  translateX -33       carousel-inner  item right active     transform  translateX 33        carousel-inner  item next     transform  translateX 33      carousel-inner  item prev     transform  translateX -33       carousel-inner  item right   carousel-inner  item left      transform  translateX 0       This will show 3 at time  but only slide one at a time   Bootstrap 3 x Demo    Please don t copy-and-paste this code  First  understand how it works  This answer is here to help you learn   Doubling up this modified bootstrap 4 carousel only functions half correctly  scroll loop stops working  how to make 2 bootstrap sliders in single page without mixing their css and jquery  Bootstrap 4 Multi Carousel show 4 images instead of 3

User · Answer

This is a working twitter bootstrap 3   Here is the javascript       myCarousel   carousel       interval  10000         carousel  item   each function        var next     this  next         if   next length            next     this  siblings   first               next children   first-child   clone   appendTo   this         if  next next   length gt 0            next next   children   first-child   clone   appendTo   this              else             this  siblings   first   children   first-child   clone   appendTo   this                And the css    carousel-inner  active left    left  -33                  carousel-inner  active right   left  33                   carousel-inner  next           left  33                   carousel-inner  prev           left  -33                  carousel-control left          background-image  none     carousel-control right         background-image  none     carousel-inner  item           background  white           You can see it in action at this Jsfiddle  The reason i added this answer because the other ones don t work entirely  I found 2 bugs inside them  one of them was that the left arrow generated a strange effect and the other was about the text getting bold in some situations witch can be resolved by setting the background color so the bottom item wont be visible while the transition effect

User · Answer

This is what worked for me  Very simple jQuery and CSS to make responsive carousel works independently of carousels on the same page  Highly customizable but basically a div with white-space nowrap containing a bunch of inline-block elements and put the last one at the beginning to move back or the first one to the end to move forward  Thank you insertAfter    x000D   x000D      carosel-control-right   click function     x000D      this  blur    x000D      this  parent   find   carosel-item   first   insertAfter   this  parent   find   carosel-item   last     x000D      x000D      carosel-control-left   click function     x000D      this  blur    x000D      this  parent   find   carosel-item   last   insertBefore   this  parent   find   carosel-item   first     x000D      x000D   media  max-width  300px    x000D     carosel-item   x000D      width  100   x000D      x000D    x000D   media  min-width  300px    x000D     carosel-item   x000D      width  50   x000D      x000D    x000D   media  min-width  500px    x000D     carosel-item   x000D      width  33 333   x000D      x000D    x000D   media  min-width  768px    x000D     carosel-item   x000D      width  25   x000D      x000D    x000D   carosel   x000D    position  relative  x000D    background-color   000  x000D    x000D   carosel-inner   x000D    white-space  nowrap  x000D    overflow  hidden  x000D    font-size  0  x000D    x000D   carosel-item   x000D    display  inline-block  x000D    x000D   carosel-control   x000D    position  absolute  x000D    top  50   x000D    padding  15px  x000D    box-shadow  0 0 10px 0px rgba 0  0  0  0 5   x000D    transform  translateY -50    x000D    border-radius  50   x000D    color  rgba 0  0  0  0 5   x000D    font-size  30px  x000D    display  inline-block  x000D    x000D   carosel-control-left   x000D    left  15px  x000D    x000D   carosel-control-right   x000D    right  15px  x000D    x000D   carosel-control active  x000D   carosel-control hover   x000D    text-decoration  none  x000D    color  rgba 0  0  0  0 8   x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div class  carosel  id  carosel1  gt  x000D     lt a class  carosel-control carosel-control-left glyphicon glyphicon-chevron-left  href     gt  lt  a gt  x000D     lt div class  carosel-inner  gt  x000D       lt img class  carosel-item  src  http   placehold it 500 bbbbbb fff amp amp text 1    gt  x000D       lt img class  carosel-item  src  http   placehold it 500 CCCCCC amp amp text 2    gt  x000D       lt img class  carosel-item  src  http   placehold it 500 eeeeee amp amp text 3    gt  x000D       lt img class  carosel-item  src  http   placehold it 500 f4f4f4 amp amp text 4    gt  x000D       lt img class  carosel-item  src  http   placehold it 500 fcfcfc 333 amp amp text 5    gt  x000D       lt img class  carosel-item  src  http   placehold it 500 f477f4 fff amp amp text 6    gt  x000D     lt  div gt  x000D     lt a class  carosel-control carosel-control-right glyphicon glyphicon-chevron-right  href     gt  lt  a gt  x000D   lt  div gt  x000D   lt div class  carosel  id  carosel2  gt  x000D     lt a class  carosel-control carosel-control-left glyphicon glyphicon-chevron-left  href     gt  lt  a gt  x000D     lt div class  carosel-inner  gt  x000D       lt img class  carosel-item  src  http   placehold it 500 bbbbbb fff amp amp text 1    gt  x000D       lt img class  carosel-item  src  http   placehold it 500 CCCCCC amp amp text 2    gt  x000D       lt img class  carosel-item  src  http   placehold it 500 eeeeee amp amp text 3    gt  x000D       lt img class  carosel-item  src  http   placehold it 500 f4f4f4 amp amp text 4    gt  x000D       lt img class  carosel-item  src  http   placehold it 500 fcfcfc 333 amp amp text 5    gt  x000D       lt img class  carosel-item  src  http   placehold it 500 f477f4 fff amp amp text 6    gt  x000D     lt  div gt  x000D     lt a class  carosel-control carosel-control-right glyphicon glyphicon-chevron-right  href     gt  lt  a gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I ve seen your question and answers  and made a new responsive and flexible multi items carousel Gist  you can see it here   https   gist github com IVIR3zaM d143a361e61459146ae7c68ce86b066e

User · Answer

All the above solutions are hacky and buggy  Don t even try  Use other libs  The best I have found - http   sachinchoolur github io lightslider Works great with bootstrap  does not add junk html  highly-configurable  responsive  mobile-friendly etc         multi-item-carousel   lightSlider       item  4      pager  false      autoWidth  false      slideMargin  0

User · Answer

You can add multiple li in ol tag that has attribute as class with value   carousel-indicators  and with data-slide-to has sequential values like 0 to 6 or 0 to 9   than you just need to copy and paste the div which has attribute as class with value  item     This works for me    lt div data-ride  carousel  class  carousel slide  id  myCarousel  gt       lt  -- Indicators -- gt       lt ol class  carousel-indicators  gt           lt li class    data-slide-to  0  data-target   myCarousel  gt  lt  li gt           lt li data-slide-to  1  data-target   myCarousel  class    gt  lt  li gt           lt li data-slide-to  2  data-target   myCarousel  class  active  gt  lt  li gt           lt li data-slide-to  3  data-target   myCarousel  class    gt  lt  li gt           lt li data-slide-to  4  data-target   myCarousel  class    gt  lt  li gt           lt li data-slide-to  5  data-target   myCarousel  class    gt  lt  li gt           lt li data-slide-to  6  data-target   myCarousel  class    gt  lt  li gt       lt  ol gt       lt div role  listbox  class  carousel-inner  gt           lt div class  item active  gt               lt img alt  First slide  src  images carousel 11 jpg                  class  first-slide  gt           lt  div gt           lt div class  item  gt               lt img alt  Second slide  src  images carousel 22 jpg                  class  second-slide  gt           lt  div gt           lt div class  item  gt               lt img alt  Third slide  src  images carousel 33 jpg                  class  third-slide  gt           lt  div gt           lt div class  item  gt               lt img alt  Third slide  src  images carousel 44 jpeg                  class  fourth-slide  gt           lt  div gt           lt div class  item  gt               lt img alt  Third slide  src  images carousel 55 jpg                  class  third-slide  gt           lt  div gt           lt div class  item  gt               lt img alt  Third slide  src  images carousel 66 jpg                  class  third-slide  gt           lt  div gt           lt div class  item  gt               lt img alt  Third slide  src  images carousel 77 jpg                  class  third-slide  gt           lt  div gt       lt  div gt       lt a data-slide  prev  role  button  href   myCarousel          class  left carousel-control  gt   lt span aria-hidden  true          class  glyphicon glyphicon-chevron-left  gt  lt  span gt   lt span         class  sr-only  gt Previous lt  span gt       lt  a gt   lt a data-slide  next  role  button  href   myCarousel          class  right carousel-control  gt   lt span aria-hidden  true          class  glyphicon glyphicon-chevron-right  gt  lt  span gt   lt span         class  sr-only  gt Next lt  span gt       lt  a gt   lt  div gt

User · Answer

x000D   x000D          carousel-example-generic   on  slid bs carousel   function      x000D              item active nth-child          carousel-inner  item   length -1          item   insertBefore     item first-child     x000D              item active last-child   insertBefore     item first-child     x000D              x000D           item active  x000D           item active    item  x000D           item active    item     item   x000D             width  33 3   x000D             display  block  x000D             float left  x000D                      x000D      lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css  integrity  sha384-1q8mTJOASx8j1Au a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7  crossorigin  anonymous  gt  x000D   x000D   lt div id  carousel-example-generic  class  carousel slide  data-ride  carousel  style  max-width 800px   gt  x000D     lt  -- Indicators -- gt  x000D     lt ol class  carousel-indicators  gt  x000D       lt li data-target   carousel-example-generic  data-slide-to  0  class  active  gt  lt  li gt  x000D       lt li data-target   carousel-example-generic  data-slide-to  1  gt  lt  li gt  x000D       lt li data-target   carousel-example-generic  data-slide-to  2  gt  lt  li gt  x000D     lt  ol gt  x000D   x000D     lt  -- Wrapper for slides -- gt  x000D     lt div class  carousel-inner  role  listbox  gt  x000D       lt div class  item active  gt  x000D           lt img data-src  holder js 300x200 text 1  gt  x000D       lt  div gt  x000D       lt div class  item  gt  x000D           lt img data-src  holder js 300x200 text 2  gt  x000D       lt  div gt  x000D       lt div class  item  gt  x000D           lt img data-src  holder js 300x200 text 3  gt  x000D       lt  div gt  x000D       lt div class  item  gt  x000D           lt img data-src  holder js 300x200 text 4  gt  x000D       lt  div gt  x000D       lt div class  item  gt  x000D           lt img data-src  holder js 300x200 text 5  gt  x000D       lt  div gt  x000D       lt div class  item  gt  x000D           lt img data-src  holder js 300x200 text 6  gt  x000D       lt  div gt  x000D       lt div class  item  gt  x000D           lt img data-src  holder js 300x200 text 7  gt  x000D       lt  div gt      x000D     lt  div gt  x000D   x000D     lt  -- Controls -- gt  x000D     lt a class  left carousel-control  href   carousel-example-generic  role  button  data-slide  prev  gt  x000D       lt span class  glyphicon glyphicon-chevron-left  aria-hidden  true  gt  lt  span gt  x000D       lt span class  sr-only  gt Previous lt  span gt  x000D     lt  a gt  x000D     lt a class  right carousel-control  href   carousel-example-generic  role  button  data-slide  next  gt  x000D       lt span class  glyphicon glyphicon-chevron-right  aria-hidden  true  gt  lt  span gt  x000D       lt span class  sr-only  gt Next lt  span gt  x000D     lt  a gt  x000D   lt  div gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 3 jquery min js  gt  lt  script gt  x000D       lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 6 js bootstrap min js  integrity  sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS  crossorigin  anonymous  gt  lt  script gt  x000D       lt script src  https   cdnjs cloudflare com ajax libs holder 2 9 1 holder min js  gt  lt  script gt  x000D       x000D   x000D   x000D

User · Answer

The most popular answer is right but I think the code is uselessly complicated  With the same css  this jquery code is easier to understand I believe       myCarousel   carousel     interval  10000         carousel  item   each function       var item     this     item siblings   each function index        if  index  lt  4            this  children   first-child   clone   appendTo item

User · Answer

Try this code     lt div id  recommended-item-carousel  class  carousel slide  data-ride  carousel  gt       lt div class  carousel-inner  gt           lt div class  item active  gt                lt div class  col-sm-3  gt                   lt div class  product-image-wrapper  gt                       lt div class  single-products  gt                           lt div class  productinfo text-center  gt                               lt img src  img home recommend1 jpg  alt      gt                               lt h2 gt  56 lt  h2 gt                               lt p gt                                  Easy Polo Black Edition                              lt  p gt                               lt a href     class  btn btn-default add-to-cart  gt  lt i class  fa fa-shopping-cart  gt  lt  i gt Add to cart lt  a gt                           lt  div gt                        lt  div gt                   lt  div gt               lt  div gt               lt div class  col-sm-3  gt                   lt div class  product-image-wrapper  gt                       lt div class  single-products  gt                           lt div class  productinfo text-center  gt                               lt img src  img home recommend2 jpg  alt      gt                               lt h2 gt  56 lt  h2 gt                               lt p gt                                  Easy Polo Black Edition                              lt  p gt                               lt a href     class  btn btn-default add-to-cart  gt  lt i class  fa fa-shopping-cart  gt  lt  i gt Add to cart lt  a gt                           lt  div gt                        lt  div gt                   lt  div gt               lt  div gt               lt div class  col-sm-3  gt                   lt div class  product-image-wrapper  gt                       lt div class  single-products  gt                           lt div class  productinfo text-center  gt                               lt img src  img home recommend3 jpg  alt      gt                               lt h2 gt  56 lt  h2 gt                               lt p gt                                  Easy Polo Black Edition                              lt  p gt                               lt a href     class  btn btn-default add-to-cart  gt  lt i class  fa fa-shopping-cart  gt  lt  i gt Add to cart lt  a gt                           lt  div gt                        lt  div gt                   lt  div gt               lt  div gt           lt  div gt           lt div class  item  gt               lt div class  col-sm-3  gt                   lt div class  product-image-wrapper  gt                       lt div class  single-products  gt                           lt div class  productinfo text-center  gt                               lt img src  img home recommend1 jpg  alt      gt                               lt h2 gt  56 lt  h2 gt                               lt p gt                                  Easy Polo Black Edition                              lt  p gt                               lt a href     class  btn btn-default add-to-cart  gt  lt i class  fa fa-shopping-cart  gt  lt  i gt Add to cart lt  a gt                           lt  div gt                        lt  div gt                   lt  div gt               lt  div gt               lt div class  col-sm-3  gt                   lt div class  product-image-wrapper  gt                       lt div class  single-products  gt                           lt div class  productinfo text-center  gt                               lt img src  img home recommend2 jpg  alt      gt                               lt h2 gt  56 lt  h2 gt                               lt p gt                                  Easy Polo Black Edition                              lt  p gt                               lt a href     class  btn btn-default add-to-cart  gt  lt i class  fa fa-shopping-cart  gt  lt  i gt Add to cart lt  a gt                           lt  div gt                        lt  div gt                   lt  div gt               lt  div gt               lt div class  col-sm-3  gt                   lt div class  product-image-wrapper  gt                       lt div class  single-products  gt                           lt div class  productinfo text-center  gt                               lt img src  img home recommend3 jpg  alt      gt                               lt h2 gt  56 lt  h2 gt                               lt p gt                                  Easy Polo Black Edition                              lt  p gt                               lt a href     class  btn btn-default add-to-cart  gt  lt i class  fa fa-shopping-cart  gt  lt  i gt Add to cart lt  a gt                           lt  div gt                        lt  div gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt       lt a class  left recommended-item-control  href   recommended-item-carousel  data-slide  prev  gt   lt i class  fa fa-angle-left  gt  lt  i gt   lt  a gt       lt a class  right recommended-item-control  href   recommended-item-carousel  data-slide  next  gt   lt i class  fa fa-angle-right  gt  lt  i gt   lt  a gt   lt  div gt

[jquery] Bootstrap carousel multiple frames at once

Examples related to jquery

Examples related to twitter-bootstrap-3

Examples related to jquery-plugins

Examples related to carousel

Examples related to bootstrap-4