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 Lee Quessenberry on CodePen.
Created
April 6, 2021 22:30
-
-
Save lquessenberry/8e0547091b0836b13866029c2e2c8ed8 to your computer and use it in GitHub Desktop.
multiple items per slide in bootstrap carousel
This file contains 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="top-content"> | |
| <div class="container-fluid"> | |
| <div id="carousel-example" class="carousel slide" data-ride="carousel"> | |
| <div class="carousel-inner row w-100 mx-auto" role="listbox"> | |
| <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3 active"> | |
| <img src="https://source.unsplash.com/300x300/?nature,water" class="img-fluid mx-auto d-block" alt="img1"> | |
| </div> | |
| <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3"> | |
| <img src="https://source.unsplash.com/300x300/?nature,trees" class="img-fluid mx-auto d-block" alt="img2"> | |
| </div> | |
| <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3"> | |
| <img src="https://source.unsplash.com/300x300/?nature,bees" class="img-fluid mx-auto d-block" alt="img3"> | |
| </div> | |
| <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3"> | |
| <img src="https://source.unsplash.com/300x300/?nature,sky" class="img-fluid mx-auto d-block" alt="img4"> | |
| </div> | |
| <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3"> | |
| <img src="https://source.unsplash.com/300x300/?industrial" class="img-fluid mx-auto d-block" alt="img5"> | |
| </div> | |
| <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3"> | |
| <img src="https://source.unsplash.com/300x300/?industrial,bolt" class="img-fluid mx-auto d-block" alt="img6"> | |
| </div> | |
| <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3"> | |
| <img src="https://source.unsplash.com/300x300/?industrial,machine" class="img-fluid mx-auto d-block" alt="img7"> | |
| </div> | |
| <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3"> | |
| <img src="https://source.unsplash.com/300x300/?industrial,red" class="img-fluid mx-auto d-block" alt="img8"> | |
| </div> | |
| </div> | |
| <a class="carousel-control-prev" href="#carousel-example" role="button" data-slide="prev"> | |
| <span class="carousel-control-prev-icon" aria-hidden="true"></span> | |
| <span class="sr-only">Previous</span> | |
| </a> | |
| <a class="carousel-control-next" href="#carousel-example" role="button" data-slide="next"> | |
| <span class="carousel-control-next-icon" aria-hidden="true"></span> | |
| <span class="sr-only">Next</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> |
This file contains 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
| /* | |
| Carousel | |
| */ | |
| $('#carousel-example').on('slide.bs.carousel', function (e) { | |
| /* | |
| CC 2.0 License Iatek LLC 2018 - Attribution required | |
| */ | |
| var $e = $(e.relatedTarget); | |
| var idx = $e.index(); | |
| var itemsPerSlide = 5; | |
| var totalItems = $('.carousel-item').length; | |
| if (idx >= totalItems-(itemsPerSlide-1)) { | |
| var it = itemsPerSlide - (totalItems - idx); | |
| for (var i=0; i<it; i++) { | |
| // append slides to end | |
| if (e.direction=="left") { | |
| $('.carousel-item').eq(i).appendTo('.carousel-inner'); | |
| } | |
| else { | |
| $('.carousel-item').eq(0).appendTo('.carousel-inner'); | |
| } | |
| } | |
| } | |
| }); |
This file contains 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://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script> |
This file contains 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
| /* | |
| code by Iatek LLC 2018 - CC 2.0 License - Attribution required | |
| code customized by Azmind.com | |
| */ | |
| @media (min-width: 768px) and (max-width: 991px) { | |
| /* Show 4th slide on md if col-md-4*/ | |
| .carousel-inner .active.col-md-4.carousel-item + .carousel-item + .carousel-item + .carousel-item { | |
| position: absolute; | |
| top: 0; | |
| right: -33.3333%; /*change this with javascript in the future*/ | |
| z-index: -1; | |
| display: block; | |
| visibility: visible; | |
| } | |
| } | |
| @media (min-width: 576px) and (max-width: 768px) { | |
| /* Show 3rd slide on sm if col-sm-6*/ | |
| .carousel-inner .active.col-sm-6.carousel-item + .carousel-item + .carousel-item { | |
| position: absolute; | |
| top: 0; | |
| right: -50%; /*change this with javascript in the future*/ | |
| z-index: -1; | |
| display: block; | |
| visibility: visible; | |
| } | |
| } | |
| @media (min-width: 576px) { | |
| .carousel-item { | |
| margin-right: 0; | |
| } | |
| /* show 2 items */ | |
| .carousel-inner .active + .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 { | |
| transition: none; | |
| } | |
| .carousel-inner .carousel-item-next { | |
| position: relative; | |
| transform: translate3d(0, 0, 0); | |
| } | |
| /* 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 { | |
| position: relative; | |
| transform: translate3d(-100%, 0, 0); | |
| visibility: visible; | |
| } | |
| /* farthest right hidden item must be also positioned 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 { | |
| position: relative; | |
| transform: translate3d(100%, 0, 0); | |
| visibility: visible; | |
| display: block; | |
| visibility: visible; | |
| } | |
| } | |
| /* MD */ | |
| @media (min-width: 768px) { | |
| /* show 3rd of 3 item slide */ | |
| .carousel-inner .active + .carousel-item + .carousel-item { | |
| display: block; | |
| } | |
| .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item { | |
| transition: none; | |
| } | |
| .carousel-inner .carousel-item-next { | |
| position: relative; | |
| transform: translate3d(0, 0, 0); | |
| } | |
| /* left or forward direction */ | |
| .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item { | |
| position: relative; | |
| transform: translate3d(-100%, 0, 0); | |
| visibility: visible; | |
| } | |
| /* right or prev direction */ | |
| .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; | |
| } | |
| } | |
| /* LG */ | |
| @media (min-width: 991px) { | |
| /* show 4th item */ | |
| .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item { | |
| display: block; | |
| } | |
| .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item { | |
| transition: none; | |
| } | |
| /* Show 5th slide on lg if col-lg-3 */ | |
| .carousel-inner .active.col-lg-3.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item { | |
| position: absolute; | |
| top: 0; | |
| right: -25%; /*change this with javascript in the future*/ | |
| z-index: -1; | |
| display: block; | |
| visibility: visible; | |
| } | |
| /* left or forward direction */ | |
| .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item { | |
| position: relative; | |
| transform: translate3d(-100%, 0, 0); | |
| visibility: visible; | |
| } | |
| /* right or prev direction //t - previous slide direction last item animation fix */ | |
| .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item { | |
| position: relative; | |
| transform: translate3d(100%, 0, 0); | |
| visibility: visible; | |
| display: block; | |
| visibility: visible; | |
| } | |
| } |
This file contains 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://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment