Here's a way to iterate through multiple items in one slide in bootstrap 3.3.x
But tbh, you're better off using something like Owl Carousel...
A Pen by Maurice Melchers on CodePen.
Created
November 27, 2020 05:10
-
-
Save killerdevildog11/e5ed8cc365e8cd742cc6b6ee27dc1c0a to your computer and use it in GitHub Desktop.
multiple items per slide in bootstrap carousel
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <h1>Use Bootstrap 3's carousel to show multiple items per slide.</h1> | |
| <div class="row"> | |
| <div class="col-md-12"> | |
| <div class="carousel slide multi-item-carousel" id="theCarousel"> | |
| <div class="carousel-inner"> | |
| <div class="item active"> | |
| <div class="col-xs-4"><a href="#1"><img src="https://source.unsplash.com/300x300/?perth,australia" class="img-responsive"></a></div> | |
| </div> | |
| <div class="item"> | |
| <div class="col-xs-4"><a href="#1"><img src="https://source.unsplash.com/300x300/?fremantle,australia" class="img-responsive"></a></div> | |
| </div> | |
| <div class="item"> | |
| <div class="col-xs-4"><a href="#1"><img src="https://source.unsplash.com/300x300/?west-australia" class="img-responsive"></a></div> | |
| </div> | |
| <div class="item"> | |
| <div class="col-xs-4"><a href="#1"><img src="https://source.unsplash.com/300x300/?perth" class="img-responsive"></a></div> | |
| </div> | |
| <div class="item"> | |
| <div class="col-xs-4"><a href="#1"><img src="https://source.unsplash.com/300x300/?quokka,perth" class="img-responsive"></a></div> | |
| </div> | |
| <div class="item"> | |
| <div class="col-xs-4"><a href="#1"><img src="https://source.unsplash.com/300x300/?margaretriver,australia" class="img-responsive"></a></div> | |
| </div> | |
| <!-- add more items here --> | |
| <!-- Example item start: --> | |
| <div class="item"> | |
| <div class="col-xs-4"><a href="#1"><img src="https://source.unsplash.com/300x300/?perth,australia&r=7" class="img-responsive"></a></div> | |
| </div> | |
| <!-- Example item end --> | |
| </div> | |
| <a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> | |
| <a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Instantiate the Bootstrap carousel | |
| $('.multi-item-carousel').carousel({ | |
| interval: false | |
| }); | |
| // for every slide in carousel, copy the next slide's item in the slide. | |
| // Do the same for the next, next item. | |
| $('.multi-item-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)); | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .multi-item-carousel{ | |
| .carousel-inner{ | |
| > .item{ | |
| transition: 500ms ease-in-out left; | |
| } | |
| .active{ | |
| &.left{ | |
| left:-33%; | |
| } | |
| &.right{ | |
| left:33%; | |
| } | |
| } | |
| .next{ | |
| left: 33%; | |
| } | |
| .prev{ | |
| left: -33%; | |
| } | |
| @media all and (transform-3d), (-webkit-transform-3d) { | |
| > .item{ | |
| // use your favourite prefixer here | |
| transition: 500ms ease-in-out left; | |
| transition: 500ms ease-in-out all; | |
| backface-visibility: visible; | |
| transform: none!important; | |
| } | |
| } | |
| } | |
| .carouse-control{ | |
| &.left, &.right{ | |
| background-image: none; | |
| } | |
| } | |
| } | |
| // non-related styling: | |
| body{ | |
| background: #333; | |
| color: #ddd; | |
| } | |
| h1{ | |
| color: white; | |
| font-size: 2.25em; | |
| text-align: center; | |
| margin-top: 1em; | |
| margin-bottom: 2em; | |
| text-shadow: 0px 2px 0px rgba(0, 0, 0, 1); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment