Bootstrap carousel multiple frames at once

Asked 15/11, 2013 at 18:0 Answered 19/12, 2021 at 18:30

Solved jquery twitter-bootstrap-3 jquery-plugins carousel bootstrap-4

139

This is the effect I'm trying to achieve with Bootstrap 3 carousel

enter image description here

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

Lei answered 15/11, 2013 at 18:0 Comment(3)

Sorry already adapted Bootstrap 4 but easy to change https://mcmap.net/q/168120/-bootstrap-carousel-number-of-items-to-display-on-different-resoultions – Tomikotomkiel 7/2, 2017 at 19:17

There is a new solution to this problem using Ken Wheeler's Slick Carousel that is easier to implement and more elegant than these ones. Please view @joshmoto answer with the full code here > https://mcmap.net/q/168121/-bootstrap-4-carousel-with-multi-col-slides – Mehalick 24/1, 2020 at 14:43

@Mehalick thanks, I posted a Bootstrap 3 and 4 Slick solution here... – Vasili 19/2, 2021 at 2:19

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/

Dis answered 8/12, 2013 at 7:16 Comment(0)

237

Bootstrap 5 (Update 2021)

While the carousel is mostly the same in Bootstrap 5, the concept of left and right have changed to start and end since Bootstrap now has RTL support. Therefore the left/right classes have changed. Here's an example of the multi-item CSS for 4 items (25% width columns)...

@media (min-width: 768px) {
    
    .carousel-inner .carousel-item-end.active,
    .carousel-inner .carousel-item-next {
      transform: translateX(25%);
    }
    
    .carousel-inner .carousel-item-start.active, 
    .carousel-inner .carousel-item-prev {
      transform: translateX(-25%);
    }
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start { 
  transform: translateX(0);
}

Since jQuery is no longer required, we use vanilla JS to clone the slides into the carousel-item divs..

let items = document.querySelectorAll('.carousel .carousel-item')

items.forEach((el) => {
    // number of slides per carousel-item
    const minPerSlide = 4
    let next = el.nextElementSibling
    for (var i=1; i<minPerSlide; i++) {
        if (!next) {
            // wrap carousel by using first child
            next = items[0]
        }
        let cloneChild = next.cloneNode(true)
        el.appendChild(cloneChild.children[0])
        next = next.nextElementSibling
    }
})

Bootstrap 5 Multi-item Carousel Demo

Bootstrap 4 (Update 2019)

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;
    }

}

<div class="container-fluid">
    <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000">
        <div class="carousel-inner row w-100 mx-auto" role="listbox">
            <div class="carousel-item col-md-4 active">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400/000/fff?text=1" alt="slide 1">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=2" alt="slide 2">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=3" alt="slide 3">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=4" alt="slide 4">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 5">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=6" alt="slide 6">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=7" alt="slide 7">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=8" alt="slide 7">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
            <i class="fa fa-chevron-left fa-lg text-muted"></i>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
            <i class="fa fa-chevron-right fa-lg text-muted"></i>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

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

Costumier answered 15/11, 2013 at 19:2 Comment(14)

Thanks. That does look a lot better... but feels a bit weird. scrolling to the left doesn't seem to work, as it scroll multiple blocks at a time, and the order seems off. Scrolling to the right works fine (though in the wrong direction). The issue I'm having with this is that it seems to create a lot of duplicates, which is not that bad... but not that good... so for every item I have (6 in your case), that script creates N duplicates (where N = blocks shown per frame). – Lei 15/11, 2013 at 21:12

@Skelly Should that same logic work if there're four elements? I tried to modify the bootply, but it didn't work the way I needed :( – Stranglehold 23/5, 2014 at 18:24

@rodrigo-silveira, I've fixed the left scrolling bug. Checkout the fork with the missing .carousel-inner .active.right { left: 33%; } style. – Placet 23/7, 2014 at 0:55

@Zentaurus, I know it is late, but check out the four elements example. I've adapted Skelly logic for an SOpt question. – Placet 23/7, 2014 at 1:9

Found why it doesn't work on > 3.3.0 it is due to the inclusion of translate3D, check the answers of Danijel and Michal Vrchota on: #18613771 – Bleak 10/6, 2015 at 18:0

I revamped the entire answer for 3.x and the new 4.x carousel – Costumier 18/5, 2017 at 9:45

Thank you for this answer. Just a note it does not work on Bootstrap 4.1 here is an example where it does not work as expected codeply.com/go/abl0iCMUOE – Emarginate 30/10, 2018 at 4:36

@MikeA That doesn't work because it's not the correct CSS/JS as shown in the answer. It should look like this: codeply.com/go/RncxxzycWg – Costumier 30/10, 2018 at 11:17

@Zim that demo keeps 1 slide visible. I am hoping to show 3 or 4 (as many as the screen fits) then show 1 item after that. – Emarginate 30/10, 2018 at 14:52

@Emarginate Exactly, in the latest version (4.3.1) the only thing that got it working for me was the margin adjustment explained in another answer in here. – Platinotype 5/8, 2019 at 22:3

@Codeply-er all the links in the answer are broken. Are you able to update them please? Thanks. – Celadon 12/5, 2020 at 10:20

@Codeply-er must have been Codeply! I was getting 500 errors for all of the links before. Thanks - great answer. – Celadon 12/5, 2020 at 11:19

Can any one explain the CSS code for responsive carousel – Tagmemics 14/6, 2021 at 18:9

@zim Thanks for your professional guidance I'm working with version 5 and it worked great I use this code to find the first active to be compatible with php <? = (array_key_first ($ comments) == $ key)? 'active': ''?> I hope it is useful – Hebert 9/2, 2022 at 10:53

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
});

Misguidance answered 22/3, 2016 at 21:9 Comment(4)

Thanks a lot, very usefull lib :) – Encore 7/10, 2016 at 13:35

Some of these slider library indeed dwarfs what bootstrap, even 4, offers. Thanks for sharing. – Arvell 5/1, 2018 at 11:13

The slider duplicates slides. See example sliders soruce code on their website. – Impermanent 22/1, 2019 at 18:21

This is a dead project with too many open issues. (check their github) – Herries 19/2, 2020 at 16:54

Can this be done with bootstrap 3's carousel? I'm hoping I won't have to go hunting for yet another jQuery plugin

Dis answered 8/12, 2013 at 7:16 Comment(0)

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

Aegina answered 21/1, 2015 at 18:46 Comment(13)

thank you for sharing...i do see some flickering in firefox, however. – Americanize 5/3, 2015 at 6:20

@Aegina how can I increase number of images in visible row ? – Cuenca 8/5, 2015 at 10:19

Well in case you have 4 items in your css you should change 33% with 25% and you have to make a little change in the javascript also. In case you don't manage to resolve that, post a question and i will post a complete response there. – Aegina 8/5, 2015 at 11:23

is there a dynamic solution to a variable "x" number of images (not just 3, 33%) ? – Ley 27/1, 2016 at 14:0

Mabey there is, but it's a more complex solution, if you post a question regarding this, I might try to create something. – Aegina 28/1, 2016 at 6:53

@paulalexandru, the original question does ask for "N frames slide by side" so really it would be the real answer to this question. – Houchens 3/5, 2016 at 20:22

@tehlivi, yes so what is the problem because I don't understand.He asked for N frames, but in his picture attached to the question 3 frames are displayed. If you want to have 4,5,6,..N all you need to do is to adjust the css values, it's that simple. – Aegina 4/5, 2016 at 7:37

@Aegina If you updated your fiddle to show 4 instead or 3, you will need to change the js, html, and css. The js only displays one additional image instead of two. – Houchens 4/5, 2016 at 17:18

@Houchens Why would you show 4 insted of 3 since in the image attached to this question 3 images are displayed not 4? If you want 4, you change the code to display 4, what is the problem? The principle matters bro. – Aegina 5/5, 2016 at 12:4

@Aegina I was just using 4 as an example. I understand the picture shows 3. However, OP wrote N. You said all you have to do to increase the amount of images was to just change the CSS which is not complete information for anyone else who may come to this question. The version of Bootstrap is out of date anyway for newer carousels. (I wish we could just get rid of all carousels forever) – Houchens 5/5, 2016 at 19:39

@tehlivi, anyone who has minimum knowledge of javascript, css and html can figure it out based on my response. If you can't do that, than I suggest you post another question. There is no carousel with N elements. There is only carousels with 2,3,4... elements. So when you post a question you will write the exact number, not an N, because you know from the begining what your carousel will look like, how many elements will have. And this is the case for this example also, he knew that he needs 3 elements. – Aegina 10/5, 2016 at 7:45

Thank you so much. This helped me out a lot. I am building a custom bootstrap theme for a drupal 8 site based on the Barrio theme. It doesn't have too many options when it came to customizing a carousel. The JS and CSS you've provided worked like magic. I had to modify the code a bit to suit my requirements but all in all its worked fantastically. Thank you so much @Aegina – Fingering 8/8, 2019 at 0:21

How to stop carousel on last slide? don't want to append the first again. – Crum 20/1, 2020 at 10:19

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.

Affray answered 6/3, 2019 at 18:17 Comment(4)

God bless you ahaha – Hazlitt 5/5, 2019 at 17:5

For anyone struggling with the above best selected answer, this answer, specifically the codepen link is working great using bootstrap v4.4.0. With a bit of tweaking you can easily get it working with 4 slides visible or whatever you need. Thanks for posting. – Fascicule 6/5, 2020 at 19:24

A word of warning to anyone wanting to use the above - if you want to use indicators this is completely bugged. – Ingles 1/12, 2020 at 17:41

This is by far the best solution for bootstrap ^4.3.1 – Interfluent 7/8, 2021 at 3:34

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!

$('.carosel-control-right').click(function() {
  $(this).blur();
  $(this).parent().find('.carosel-item').first().insertAfter($(this).parent().find('.carosel-item').last());
});
$('.carosel-control-left').click(function() {
  $(this).blur();
  $(this).parent().find('.carosel-item').last().insertBefore($(this).parent().find('.carosel-item').first());
});

@media (max-width: 300px) {
  .carosel-item {
    width: 100%;
  }
}
@media (min-width: 300px) {
  .carosel-item {
    width: 50%;
  }
}
@media (min-width: 500px) {
  .carosel-item {
    width: 33.333%;
  }
}
@media (min-width: 768px) {
  .carosel-item {
    width: 25%;
  }
}
.carosel {
  position: relative;
  background-color: #000;
}
.carosel-inner {
  white-space: nowrap;
  overflow: hidden;
  font-size: 0;
}
.carosel-item {
  display: inline-block;
}
.carosel-control {
  position: absolute;
  top: 50%;
  padding: 15px;
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.5);
  transform: translateY(-50%);
  border-radius: 50%;
  color: rgba(0, 0, 0, 0.5);
  font-size: 30px;
  display: inline-block;
}
.carosel-control-left {
  left: 15px;
}
.carosel-control-right {
  right: 15px;
}
.carosel-control:active,
.carosel-control:hover {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.8);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carosel" id="carosel1">
  <a class="carosel-control carosel-control-left glyphicon glyphicon-chevron-left" href="#"></a>
  <div class="carosel-inner">
    <img class="carosel-item" src="http://placehold.it/500/bbbbbb/fff&amp;text=1" />
    <img class="carosel-item" src="http://placehold.it/500/CCCCCC&amp;text=2" />
    <img class="carosel-item" src="http://placehold.it/500/eeeeee&amp;text=3" />
    <img class="carosel-item" src="http://placehold.it/500/f4f4f4&amp;text=4" />
    <img class="carosel-item" src="http://placehold.it/500/fcfcfc/333&amp;text=5" />
    <img class="carosel-item" src="http://placehold.it/500/f477f4/fff&amp;text=6" />
  </div>
  <a class="carosel-control carosel-control-right glyphicon glyphicon-chevron-right" href="#"></a>
</div>
<div class="carosel" id="carosel2">
  <a class="carosel-control carosel-control-left glyphicon glyphicon-chevron-left" href="#"></a>
  <div class="carosel-inner">
    <img class="carosel-item" src="http://placehold.it/500/bbbbbb/fff&amp;text=1" />
    <img class="carosel-item" src="http://placehold.it/500/CCCCCC&amp;text=2" />
    <img class="carosel-item" src="http://placehold.it/500/eeeeee&amp;text=3" />
    <img class="carosel-item" src="http://placehold.it/500/f4f4f4&amp;text=4" />
    <img class="carosel-item" src="http://placehold.it/500/fcfcfc/333&amp;text=5" />
    <img class="carosel-item" src="http://placehold.it/500/f477f4/fff&amp;text=6" />
  </div>
  <a class="carosel-control carosel-control-right glyphicon glyphicon-chevron-right" href="#"></a>
</div>

Fiertz answered 8/4, 2015 at 5:1 Comment(1)

Thanks, tiny giant, can you please help with me 'carousel-indicators' in your answer. and auto slide feature enable/disable. – Carola 29/5, 2019 at 9:8

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 Bootstraps carousel.js and carousel.scss vendors to reduce the final compiled sizes of your css and js files. Excluding all unused Bootstrap js and scss vendors will help reduced your final compiled output files 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...

// 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
      }
    }
  ]
});

/* .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;
}

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

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

// 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
      }
    }
  ]
});

/* .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;
}

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

Vasili answered 19/2, 2021 at 1:24 Comment(0)

try this.....it work in mine.... code:

<div class="container">
    <br>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <div class="span4" style="padding-left: 18px;">
                    <img src="http://placehold.it/290x180" class="img-thumbnail">
                    <img src="http://placehold.it/290x180" class="img-thumbnail">
                    <img src="http://placehold.it/290x180" class="img-thumbnail">
                </div>
            </div>
            <div class="item">
                 <div class="span4" style="padding-left: 18px;">
                    <img src="http://placehold.it/290x180" class="img-thumbnail">
                    <img src="http://placehold.it/290x180" class="img-thumbnail">
                    <img src="http://placehold.it/290x180" class="img-thumbnail">
                </div>
            </div>
        </div>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

Munro answered 30/12, 2014 at 8:23 Comment(0)

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 < 4) {
      $(this).children(':first-child').clone().appendTo(item);
    }
  });
});

Rumpf answered 18/8, 2015 at 18:10 Comment(1)

This works for me, although I'm experiencing that the different items are arranged vertically, rather than horizontally, while the animation still runs horizontally – Reest 4/3, 2016 at 11:1

    $('#carousel-example-generic').on('slid.bs.carousel', function () {
        $(".item.active:nth-child(" + ($(".carousel-inner .item").length -1) + ") + .item").insertBefore($(".item:first-child"));
        $(".item.active:last-child").insertBefore($(".item:first-child"));
    });

        .item.active,
        .item.active + .item,
        .item.active + .item  + .item {
           width: 33.3%;
           display: block;
           float:left;
        }

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="max-width:800px;">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
        <img data-src="holder.js/300x200?text=1">
    </div>
    <div class="item">
        <img data-src="holder.js/300x200?text=2">
    </div>
    <div class="item">
        <img data-src="holder.js/300x200?text=3">
    </div>
    <div class="item">
        <img data-src="holder.js/300x200?text=4">
    </div>
    <div class="item">
        <img data-src="holder.js/300x200?text=5">
    </div>
    <div class="item">
        <img data-src="holder.js/300x200?text=6">
    </div>
    <div class="item">
        <img data-src="holder.js/300x200?text=7">
    </div>    
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.1/holder.min.js"></script>

Bergmans answered 6/2, 2016 at 15:12 Comment(0)

UPDATE 2022 - BOOTSTRAP 5 CAROUSEL WITH MULTIPLE ITEMS

You can manage this task absolutely with bootstrap 5 CSS customization

This is a fantastic tutorial from a fantastic web developer Bootstrap 5 Carousel Multiple Items Increment By 1

well done tutorial with intermediate live results change after change

If you wanna increase the size of the slice of the 4th card (I suggest this to give the user a better sharper hint that there is a following card), just reduce from 33.333333% to e.g. 30% this

@media (min-width: 768px) {
  .carousel-inner {
    display: flex;
  }
  .carousel-item {
    margin-right: 0;
    flex: 0 0 33.333333%;
    display: block;
  }
}

Jiggerypokery answered 19/12, 2021 at 18:30 Comment(2)

it's not working on mobile screens for me. – Humph 20/2, 2022 at 17:16

On my Android 10 with latest Firefox and Chrome it works – Jiggerypokery 21/2, 2022 at 19:42

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.

Caveator answered 16/1, 2015 at 11:55 Comment(0)

Try this code


 <div id="recommended-item-carousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="item active">

            <div class="col-sm-3">
                <div class="product-image-wrapper">
                    <div class="single-products">
                        <div class="productinfo text-center">
                            <img src="img/home/recommend1.jpg" alt="" />
                            <h2>$56</h2>
                            <p>
                                Easy Polo Black Edition
                            </p>
                            <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="product-image-wrapper">
                    <div class="single-products">
                        <div class="productinfo text-center">
                            <img src="img/home/recommend2.jpg" alt="" />
                            <h2>$56</h2>
                            <p>
                                Easy Polo Black Edition
                            </p>
                            <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="product-image-wrapper">
                    <div class="single-products">
                        <div class="productinfo text-center">
                            <img src="img/home/recommend3.jpg" alt="" />
                            <h2>$56</h2>
                            <p>
                                Easy Polo Black Edition
                            </p>
                            <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="col-sm-3">
                <div class="product-image-wrapper">
                    <div class="single-products">
                        <div class="productinfo text-center">
                            <img src="img/home/recommend1.jpg" alt="" />
                            <h2>$56</h2>
                            <p>
                                Easy Polo Black Edition
                            </p>
                            <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="product-image-wrapper">
                    <div class="single-products">
                        <div class="productinfo text-center">
                            <img src="img/home/recommend2.jpg" alt="" />
                            <h2>$56</h2>
                            <p>
                                Easy Polo Black Edition
                            </p>
                            <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="product-image-wrapper">
                    <div class="single-products">
                        <div class="productinfo text-center">
                            <img src="img/home/recommend3.jpg" alt="" />
                            <h2>$56</h2>
                            <p>
                                Easy Polo Black Edition
                            </p>
                            <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <a class="left recommended-item-control" href="#recommended-item-carousel" data-slide="prev"> <i class="fa fa-angle-left"></i> </a>
    <a class="right recommended-item-control" href="#recommended-item-carousel" data-slide="next"> <i class="fa fa-angle-right"></i> </a>
</div>

Blackmarketeer answered 25/9, 2015 at 6:32 Comment(0)

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

Ease answered 13/4, 2017 at 6:13 Comment(0)

-1

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>

Pig answered 6/4, 2015 at 2:5 Comment(1)

can you show us a bootply ?? it doesn't work and I don't get what you want to do here?? – Louislouisa 17/7, 2015 at 3:22

-1

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

(function(){
  $('#carousel123').carousel({ interval: 2000 });
}());

(function(){
  $('.carousel-showmanymoveone .item').each(function(){
    var itemToClone = $(this);

    for (var i=1;i<4;i++) {
      itemToClone = itemToClone.next();

      // wrap around if at end of item collection
      if (!itemToClone.length) {
        itemToClone = $(this).siblings(':first');
      }

      // grab item, clone, add marker class, add to collection
      itemToClone.children(':first-child').clone()
        .addClass("cloneditem-"+(i))
        .appendTo($(this));
    }
  });
}());

body {
    margin-top: 50px;
}

.carousel-showmanymoveone .carousel-control {
  width: 4%;
  background-image: none;
}
.carousel-showmanymoveone .carousel-control.left {
  margin-left: 15px;
}
.carousel-showmanymoveone .carousel-control.right {
  margin-right: 15px;
}
.carousel-showmanymoveone .cloneditem-1,
.carousel-showmanymoveone .cloneditem-2,
.carousel-showmanymoveone .cloneditem-3 {
  display: none;
}
@media all and (min-width: 768px) {
  .carousel-showmanymoveone .carousel-inner > .active.left,
  .carousel-showmanymoveone .carousel-inner > .prev {
    left: -50%;
  }
  .carousel-showmanymoveone .carousel-inner > .active.right,
  .carousel-showmanymoveone .carousel-inner > .next {
    left: 50%;
  }
  .carousel-showmanymoveone .carousel-inner > .left,
  .carousel-showmanymoveone .carousel-inner > .prev.right,
  .carousel-showmanymoveone .carousel-inner > .active {
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner .cloneditem-1 {
    display: block;
  }
}
@media all and (min-width: 768px) and (transform-3d), all and (min-width: 768px) and (-webkit-transform-3d) {
  .carousel-showmanymoveone .carousel-inner > .item.active.right,
  .carousel-showmanymoveone .carousel-inner > .item.next {
    -webkit-transform: translate3d(50%, 0, 0);
            transform: translate3d(50%, 0, 0);
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner > .item.active.left,
  .carousel-showmanymoveone .carousel-inner > .item.prev {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner > .item.left,
  .carousel-showmanymoveone .carousel-inner > .item.prev.right,
  .carousel-showmanymoveone .carousel-inner > .item.active {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    left: 0;
  }
}
@media all and (min-width: 992px) {
  .carousel-showmanymoveone .carousel-inner > .active.left,
  .carousel-showmanymoveone .carousel-inner > .prev {
    left: -25%;
  }
  .carousel-showmanymoveone .carousel-inner > .active.right,
  .carousel-showmanymoveone .carousel-inner > .next {
    left: 25%;
  }
  .carousel-showmanymoveone .carousel-inner > .left,
  .carousel-showmanymoveone .carousel-inner > .prev.right,
  .carousel-showmanymoveone .carousel-inner > .active {
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner .cloneditem-2,
  .carousel-showmanymoveone .carousel-inner .cloneditem-3 {
    display: block;
  }
}
@media all and (min-width: 992px) and (transform-3d), all and (min-width: 992px) and (-webkit-transform-3d) {
  .carousel-showmanymoveone .carousel-inner > .item.active.right,
  .carousel-showmanymoveone .carousel-inner > .item.next {
    -webkit-transform: translate3d(25%, 0, 0);
            transform: translate3d(25%, 0, 0);
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner > .item.active.left,
  .carousel-showmanymoveone .carousel-inner > .item.prev {
    -webkit-transform: translate3d(-25%, 0, 0);
            transform: translate3d(-25%, 0, 0);
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner > .item.left,
  .carousel-showmanymoveone .carousel-inner > .item.prev.right,
  .carousel-showmanymoveone .carousel-inner > .item.active {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    left: 0;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="carousel carousel-showmanymoveone slide" id="carousel123">
	<div class="carousel-inner">
		<div class="item active">
			<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>
		</div>
		<div class="item">
			<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>
		</div>
		<div class="item">
			<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>
		</div>          
		<div class="item">
			<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>
		</div>
		<div class="item">
			<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>
		</div>
		<div class="item">
			<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>
		</div>
		<div class="item">
			<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>
		</div>
		<div class="item">
			<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>
		</div>
	</div>
	<a class="left carousel-control" href="#carousel123" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
	<a class="right carousel-control" href="#carousel123" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Legman answered 21/1, 2019 at 13:53 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++