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

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

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

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

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

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 <div> wrapper with the class .item-content directly into your .item <div>. Example:

<div class="carousel slide multiple" id="very-cool-carousel" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <div class="item-content">
                First page
            </div>
        </div>
        <div class="item active">
            <div class="item-content">
                Second page
            </div>
        </div>
    </div>
</div>

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

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

         _ _      _       _
     ___| (_) ___| | __  (_)___
    / __| | |/ __| |/ /  | / __|
    \__ \ | | (__|   < _ | \__ \
    |___/_|_|\___|_|\_(_)/ |___/
                       |__/

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_

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

<!-- jquery 3.3 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- bootstrap 3.4 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!-- slick 1.9 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<!-- bootstrap 3 responsive multi column slick carousel example -->

<header>
  <nav class="navbar navbar-inverse navbar-static-top">
    <div class="navbar-header" style="float:left!important;">
      <a class="navbar-brand" href="#">Slick in Bootstrap 3</a>
    </div>
    <div class="navbar-text pull-right" style="margin:15px!important;">
      <a class="navbar-link" href="http://kenwheeler.github.io/slick/" target="_blank">Slick Github</a>
    </div>
  </nav>
</header>

<main>
  <div class="container">
    <div id="slick">

      <div class="slide">
        <div class="panel panel-default">
          <img src="https://via.placeholder.com/1600x900" class="img-responsive" />
          <div class="panel-body">
            <h3 style="margin-top:0;">Article title</h3>
            <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="panel panel-default">
          <img src="https://via.placeholder.com/1600x900" class="img-responsive" />
          <div class="panel-body">
            <h3 style="margin-top:0;">Article title</h3>
            <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="panel panel-default">
          <img src="https://via.placeholder.com/1600x900" class="img-responsive" />
          <div class="panel-body">
            <h3 style="margin-top:0;">Article title</h3>
            <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="panel panel-default">
          <img src="https://via.placeholder.com/1600x900" class="img-responsive" />
          <div class="panel-body">
            <h3 style="margin-top:0;">Article title</h3>
            <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="panel panel-default">
          <img src="https://via.placeholder.com/1600x900" class="img-responsive" />
          <div class="panel-body">
            <h3 style="margin-top:0;">Article title</h3>
            <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="panel panel-default">
          <img src="https://via.placeholder.com/1600x900" class="img-responsive" />
          <div class="panel-body">
            <h3 style="margin-top:0;">Article title</h3>
            <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>
      
      <div class="slide">
        <div class="panel panel-default">
          <img src="https://via.placeholder.com/1600x900" class="img-responsive" />
          <div class="panel-body">
            <h3 style="margin-top:0;">Article title</h3>
            <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="panel panel-default">
          <img src="https://via.placeholder.com/1600x900" class="img-responsive" />
          <div class="panel-body">
            <h3 style="margin-top:0;">Article title</h3>
            <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="panel panel-default">
          <img src="https://via.placeholder.com/1600x900" class="img-responsive" />
          <div class="panel-body">
            <h3 style="margin-top:0;">Article title</h3>
            <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="panel panel-default">
          <img src="https://via.placeholder.com/1600x900" class="img-responsive" />
          <div class="panel-body">
            <h3 style="margin-top:0;">Article title</h3>
            <p>Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

    </div>
  </div>
</main>

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

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

<!-- jquery 3.5 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- bootstrap 4.5 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

<!-- slick 1.9 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<!-- bootstrap 4 responsive multi column slick carousel example -->
    
<header>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <a class="navbar-brand mr-auto" href="#">Slick in Bootstrap 4</a>
    <a class="nav-link d-none d-sm-inline" href="http://kenwheeler.github.io/slick/" target="_blank">Slick Github</a>
  </nav>
</header>

<main class="py-4">
  <div class="container">
    <div id="slick">

      <div class="slide">
        <div class="card">
          <img src="https://via.placeholder.com/1600x900" class="card-img-top" />
          <div class="card-body">
            <h5 class="card-title">Article title</h5>
            <p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="card">
          <img src="https://via.placeholder.com/1600x900" class="card-img-top" />
          <div class="card-body">
            <h5 class="card-title">Article title</h5>
            <p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="card">
          <img src="https://via.placeholder.com/1600x900" class="card-img-top" />
          <div class="card-body">
            <h5 class="card-title">Article title</h5>
            <p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="card">
          <img src="https://via.placeholder.com/1600x900" class="card-img-top" />
          <div class="card-body">
            <h5 class="card-title">Article title</h5>
            <p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="card">
          <img src="https://via.placeholder.com/1600x900" class="card-img-top" />
          <div class="card-body">
            <h5 class="card-title">Article title</h5>
            <p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="card">
          <img src="https://via.placeholder.com/1600x900" class="card-img-top" />
          <div class="card-body">
            <h5 class="card-title">Article title</h5>
            <p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>
      
      <div class="slide">
        <div class="card">
          <img src="https://via.placeholder.com/1600x900" class="card-img-top" />
          <div class="card-body">
            <h5 class="card-title">Article title</h5>
            <p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="card">
          <img src="https://via.placeholder.com/1600x900" class="card-img-top" />
          <div class="card-body">
            <h5 class="card-title">Article title</h5>
            <p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="card">
          <img src="https://via.placeholder.com/1600x900" class="card-img-top" />
          <div class="card-body">
            <h5 class="card-title">Article title</h5>
            <p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

      <div class="slide">
        <div class="card">
          <img src="https://via.placeholder.com/1600x900" class="card-img-top" />
          <div class="card-body">
            <h5 class="card-title">Article title</h5>
            <p class="card-text">Ut sed ligula vel felis vulputate lobortis id eget mauris. Nullam sollicitudin arcu ac diam ornare, eget iaculis nisl accumsan.</p>
            <button class="btn btn-primary">View article</button>
          </div>
        </div>
      </div>

    </div>
  </div>
</main>

_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

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_

(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<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 > .active.left,_x000D_
  .carousel-showmanymoveone .carousel-inner > .prev {_x000D_
    left: -50%;_x000D_
  }_x000D_
  .carousel-showmanymoveone .carousel-inner > .active.right,_x000D_
  .carousel-showmanymoveone .carousel-inner > .next {_x000D_
    left: 50%;_x000D_
  }_x000D_
  .carousel-showmanymoveone .carousel-inner > .left,_x000D_
  .carousel-showmanymoveone .carousel-inner > .prev.right,_x000D_
  .carousel-showmanymoveone .carousel-inner > .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 > .item.active.right,_x000D_
  .carousel-showmanymoveone .carousel-inner > .item.next {_x000D_
    -webkit-transform: translate3d(50%, 0, 0);_x000D_
            transform: translate3d(50%, 0, 0);_x000D_
    left: 0;_x000D_
  }_x000D_
  .carousel-showmanymoveone .carousel-inner > .item.active.left,_x000D_
  .carousel-showmanymoveone .carousel-inner > .item.prev {_x000D_
    -webkit-transform: translate3d(-50%, 0, 0);_x000D_
            transform: translate3d(-50%, 0, 0);_x000D_
    left: 0;_x000D_
  }_x000D_
  .carousel-showmanymoveone .carousel-inner > .item.left,_x000D_
  .carousel-showmanymoveone .carousel-inner > .item.prev.right,_x000D_
  .carousel-showmanymoveone .carousel-inner > .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 > .active.left,_x000D_
  .carousel-showmanymoveone .carousel-inner > .prev {_x000D_
    left: -25%;_x000D_
  }_x000D_
  .carousel-showmanymoveone .carousel-inner > .active.right,_x000D_
  .carousel-showmanymoveone .carousel-inner > .next {_x000D_
    left: 25%;_x000D_
  }_x000D_
  .carousel-showmanymoveone .carousel-inner > .left,_x000D_
  .carousel-showmanymoveone .carousel-inner > .prev.right,_x000D_
  .carousel-showmanymoveone .carousel-inner > .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 > .item.active.right,_x000D_
  .carousel-showmanymoveone .carousel-inner > .item.next {_x000D_
    -webkit-transform: translate3d(25%, 0, 0);_x000D_
            transform: translate3d(25%, 0, 0);_x000D_
    left: 0;_x000D_
  }_x000D_
  .carousel-showmanymoveone .carousel-inner > .item.active.left,_x000D_
  .carousel-showmanymoveone .carousel-inner > .item.prev {_x000D_
    -webkit-transform: translate3d(-25%, 0, 0);_x000D_
            transform: translate3d(-25%, 0, 0);_x000D_
    left: 0;_x000D_
  }_x000D_
  .carousel-showmanymoveone .carousel-inner > .item.left,_x000D_
  .carousel-showmanymoveone .carousel-inner > .item.prev.right,_x000D_
  .carousel-showmanymoveone .carousel-inner > .item.active {_x000D_
    -webkit-transform: translate3d(0, 0, 0);_x000D_
            transform: translate3d(0, 0, 0);_x000D_
    left: 0;_x000D_
  }_x000D_
}

_x000D_

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">_x000D_
_x000D_
<div class="carousel carousel-showmanymoveone slide" id="carousel123">_x000D_
 <div class="carousel-inner">_x000D_
  <div class="item active">_x000D_
   <div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/0054A6/fff/&amp;text=1" class="img-responsive"></a></div>_x000D_
  </div>_x000D_
  <div class="item">_x000D_
   <div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/002d5a/fff/&amp;text=2" class="img-responsive"></a></div>_x000D_
  </div>_x000D_
  <div class="item">_x000D_
   <div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/d6d6d6/333&amp;text=3" class="img-responsive"></a></div>_x000D_
  </div>          _x000D_
  <div class="item">_x000D_
   <div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/002040/eeeeee&amp;text=4" class="img-responsive"></a></div>_x000D_
  </div>_x000D_
  <div class="item">_x000D_
   <div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/0054A6/fff/&amp;text=5" class="img-responsive"></a></div>_x000D_
  </div>_x000D_
  <div class="item">_x000D_
   <div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/002d5a/fff/&amp;text=6" class="img-responsive"></a></div>_x000D_
  </div>_x000D_
  <div class="item">_x000D_
   <div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive"></a></div>_x000D_
  </div>_x000D_
  <div class="item">_x000D_
   <div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/40a1ff/002040&amp;text=8" class="img-responsive"></a></div>_x000D_
  </div>_x000D_
 </div>_x000D_
 <a class="left carousel-control" href="#carousel123" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>_x000D_
 <a class="right carousel-control" href="#carousel123" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>_x000D_
</div>_x000D_
_x000D_
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

_x000D_

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

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

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

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.

<div data-ride="carousel" class="carousel slide" id="myCarousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li class="" data-slide-to="0" data-target="#myCarousel"></li>
        <li data-slide-to="1" data-target="#myCarousel" class=""></li>
        <li data-slide-to="2" data-target="#myCarousel" class="active"></li>
        <li data-slide-to="3" data-target="#myCarousel" class=""></li>
        <li data-slide-to="4" data-target="#myCarousel" class=""></li>
        <li data-slide-to="5" data-target="#myCarousel" class=""></li>
        <li data-slide-to="6" data-target="#myCarousel" class=""></li>
    </ol>
    <div role="listbox" class="carousel-inner">
        <div class="item active">
            <img alt="First slide" src="images/carousel/11.jpg"
                class="first-slide">
        </div>
        <div class="item">
            <img alt="Second slide" src="images/carousel/22.jpg"
                class="second-slide">
        </div>
        <div class="item">
            <img alt="Third slide" src="images/carousel/33.jpg"
                class="third-slide">
        </div>
        <div class="item">
            <img alt="Third slide" src="images/carousel/44.jpeg"
                class="fourth-slide">
        </div>
        <div class="item">
            <img alt="Third slide" src="images/carousel/55.jpg"
                class="third-slide">
        </div>
        <div class="item">
            <img alt="Third slide" src="images/carousel/66.jpg"
                class="third-slide">
        </div>
        <div class="item">
            <img alt="Third slide" src="images/carousel/77.jpg"
                class="third-slide">
        </div>
    </div>
    <a data-slide="prev" role="button" href="#myCarousel"
        class="left carousel-control"> <span aria-hidden="true"
        class="glyphicon glyphicon-chevron-left"></span> <span
        class="sr-only">Previous</span>
    </a> <a data-slide="next" role="button" href="#myCarousel"
        class="right carousel-control"> <span aria-hidden="true"
        class="glyphicon glyphicon-chevron-right"></span> <span
        class="sr-only">Next</span>
    </a>
</div>

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

[jquery] Bootstrap carousel multiple frames at once

The answer is

Update 2019-03-06 -- Bootstrap v4.3.1

slick.js - the last carousel you'll ever need - Ken Wheeler

It truly is the last jQuery carousel plugin you will ever need.

Bootstrap 3 multi column slick carousel example

Bootstrap 4 multi column slick carousel example

Examples related to jquery

Examples related to twitter-bootstrap-3

Examples related to jquery-plugins

Examples related to carousel

Examples related to bootstrap-4

Tags