Bootstrap carosello multiple fotogrammi contemporaneamente

StackOverflow https://stackoverflow.com//questions/20007610

Domanda

Questo è l'effetto che sto cercando di ottenere con bootstrap 3 carosello

Inserisci Descrizione dell'immagine qui

Invece di mostrare solo un fotogramma alla volta, visualizza n fotogrammi scivolano a fianco.Quindi quando scivoli (o quando si sposta automaticamente), sposta il gruppo di diapositive come lo fa.

può essere fatto con il carosello di Bootstrap 3?Spero che non dovrò andare a cercare ancora un altro plugin jquery ...

È stato utile?

Soluzione

.

può essere fatto con il carosello di Bootstrap 3?Spero che non lo farò Per andare a caccia per un altro jquery plugin

A partire dal 2013-12-08 la risposta è no.L'effetto che stai cercando non è possibile utilizzare il plugin generico del carosello generico di Bootstrap 3.Tuttavia, ecco un semplice plugin jquery che sembra fare esattamente quello che vuoi http://sorgalla.com/jcarousel/

Altri suggerimenti

Aggiornato 2019 ...

Bootstrap 4

Il carosello è cambiato in 4.x, e le transizioni di animazione multi-diapositive possono essere sovrascritte come questa ... 

.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 (mostra 4, anticipo 1 alla volta)
. bootstrap 4.1.0 (mostra 3, anticipo 1 alla volta)
. bootstrap 4.1.0 (avanzare tutti e 4 su una volta)
bootstrap 4.3.1 reattivo (mostra più, anticipo 1) nuovo
bootstrap 4.3.1 carosello con carte nuovo

.

Un'altra opzione è un carosello reattivo che mostra e fa avanzare solo 1 slide su schermi più piccoli , ma mostra multiple slides sono schermi più grandi . Invece di clonare le diapositive come l'esempio precedente, questo regola il CSS e utilizza JQuery solo per spostare le diapositive extra per consentire il ciclismo continuo (avvolgente):

Si prega di non solo copiare e incollare questo codice. Innanzitutto, capisci come funziona.

bootstrap 4 reattivo (mostra 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>
.

Esempio - bootstrap 4 reattivo (mostra 4, 1 scivolo sul cellulare) < / a>
Esempio - Bootstrap 4 reattivo (mostra 5, 1 scivolo sul cellulare)

.

Bootstrap 3

Ecco un esempio 3.x su BOOTPLY: http://bootoly.com/89193 È necessario inserire un'intera riga di immagini nella voce attiva. Ecco un'altra versione che non impila le immagini in larghezze di schermate più piccole: http://boowly.com/92514

Modifica Approccio alternativo a Advance One Slide at A Time :

Usa jQuery per clonare i prossimi articoli .. 

$('.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));
  }
});
.

e poi CSS in posizione di conseguenza ...

prima 3.3.1 

.carousel-inner .active.left { left: -33%; }
.carousel-inner .next        { left:  33%; }
.

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

Questo sarà mostra 3 al momento, ma fai scivolare solo uno alla volta:

bootstrap 3.x demo

.

Si prega di non copiare e incollare questo codice. Innanzitutto, capisci come funziona. Questa risposta è qui a aiuta a imparare .

raddoppiamento Su questo carosello Modificato Bootstrap 4 funziona solo a metà correttamente a metà (loop di scorrimento smesso di funzionare)
Come creare 2 cursori bootstrap in singola pagina senza mescolare il loro CSS e JQuery?
Bootstrap 4 multi carosello Mostra 4 immagini invece di 3

Tutte le soluzioni di cui sopra sono Hacky e Buggy.Non provare nemmeno.Usa altre libs.Il meglio che ho trovato - http://sachinchoolur.github.io/lightslider Funziona alla grande con bootstrap, non aggiunge junk html, altamente configurabile, reattivo, mobile-friendly ecc ... 

$('.multi-item-carousel').lightSlider({
    item: 4,
    pager: false,
    autoWidth: false,
    slideMargin: 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.

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>

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

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.

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>


    $('#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>

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.

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

<!-- begin snippet: js hide: false console: true -->
<!--html-->
<div class="row ">
  <div class="col-md-12">
    <div class="carousel carousel-showsixmoveone slide" id="chocolatelist" data-interval="30000">
      <div class="carousel-inner">
        <div class="item active">
          <div class="col-xs-12 col-sm-4 col-md-2">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=1" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=2" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
            <a href="#">
              <img src="http://placehold.it/500/d6d6d6/333&amp;text=3" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
            <a href="#">
              <img src="http://placehold.it/500/002040/eeeeee&amp;text=4" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=5" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
            <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-4 col-md-2">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=2" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
            <a href="#">
              <img src="http://placehold.it/500/d6d6d6/333&amp;text=3" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
            <a href="#">
              <img src="http://placehold.it/500/002040/eeeeee&amp;text=4" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=5" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=6" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
            <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-4 col-md-2">
            <a href="#">
              <img src="http://placehold.it/500/d6d6d6/333&amp;text=3" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
            <a href="#">
              <img src="http://placehold.it/500/002040/eeeeee&amp;text=4" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=5" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=6" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
            <a href="#">
              <img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
            <a href="#">
              <img src="http://placehold.it/500/40a1ff/002040&amp;text=8" class="img-responsive">
            </a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-12 col-sm-4 col-md-2">
            <a href="#">
              <img src="http://placehold.it/500/002040/eeeeee&amp;text=4" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=5" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=6" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
            <a href="#">
              <img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
            <a href="#">
              <img src="http://placehold.it/500/40a1ff/002040&amp;text=8" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
            <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-4 col-md-2">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=5" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=6" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
            <a href="#">
              <img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
            <a href="#">
              <img src="http://placehold.it/500/40a1ff/002040&amp;text=8" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=1" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
            <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-4 col-md-2">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=6" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
            <a href="#">
              <img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
            <a href="#">
              <img src="http://placehold.it/500/40a1ff/002040&amp;text=8" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=1" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=2" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
            <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-4 col-md-2">
            <a href="#">
              <img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
            <a href="#">
              <img src="http://placehold.it/500/40a1ff/002040&amp;text=8" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=1" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=2" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
            <a href="#">
              <img src="http://placehold.it/500/d6d6d6/333&amp;text=3" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
            <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-4 col-md-2">
            <a href="#">
              <img src="http://placehold.it/500/40a1ff/002040&amp;text=8" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=1" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=2" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
            <a href="#">
              <img src="http://placehold.it/500/d6d6d6/333&amp;text=3" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
            <a href="#">
              <img src="http://placehold.it/500/002040/eeeeee&amp;text=4" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=5" class="img-responsive">
            </a>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#chocolatelist" data-slide="prev"><i class="glyphicon glyphicon-chevron-left "></i></a>
      <a class="right carousel-control" href="#chocolatelist" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
    </div>
  </div>
</div>

paste this code you will get some clue.image link of carousel slide

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>

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

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>

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>

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top