-
-
Save sarvar/886231c1ff1553f5f72e443f670380b3 to your computer and use it in GitHub Desktop.
Bootstrap 3 Show Many Slide One 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="carousel placeCarousel slide"> | |
| <div class="carousel-inner"> | |
| <div class="item active"> | |
| <div class="col-xs-12 col-sm-6 col-md-4 place"> | |
| <a href="#" title=""> | |
| <img src="img/img01.jpg" alt="" class="img-responsive" /> | |
| <span class="cover"></span> | |
| <span class="name"> | |
| Супермаркет <br> «KORZINKA.UZ» <br> (ориентир областная больница) | |
| </span> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <div class="col-xs-12 col-sm-6 col-md-4 place"> | |
| <a href="#" title=""> | |
| <img src="img/img02.jpg" alt="" class="img-responsive" /> | |
| <span class="cover"></span> | |
| <span class="name"> | |
| Супермаркет <br> «KORZINKA.UZ» <br> (ориентир областная больница) | |
| </span> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <div class="col-xs-12 col-sm-6 col-md-4 place"> | |
| <a href="#" title=""> | |
| <img src="img/img03.jpg" alt="" class="img-responsive" /> | |
| <span class="cover"></span> | |
| <span class="name"> | |
| Супермаркет <br> «KORZINKA.UZ» <br> (ориентир областная больница) | |
| </span> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <div class="col-xs-12 col-sm-6 col-md-4 place"> | |
| <a href="#" title=""> | |
| <img src="img/img01.jpg" alt="" class="img-responsive" /> | |
| <span class="cover"></span> | |
| <span class="name"> | |
| Супермаркет <br> «KORZINKA.UZ» <br> (ориентир областная больница) | |
| </span> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <div class="col-xs-12 col-sm-6 col-md-4 place"> | |
| <a href="#" title=""> | |
| <img src="img/img02.jpg" alt="" class="img-responsive" /> | |
| <span class="cover"></span> | |
| <span class="name"> | |
| Супермаркет <br> «KORZINKA.UZ» <br> (ориентир областная больница) | |
| </span> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <div class="col-xs-12 col-sm-6 col-md-4 place"> | |
| <a href="#" title=""> | |
| <img src="img/img03.jpg" alt="" class="img-responsive" /> | |
| <span class="cover"></span> | |
| <span class="name"> | |
| Супермаркет <br> «KORZINKA.UZ» <br> (ориентир областная больница) | |
| </span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <a class="left carousel-control" href=".placeCarousel" data-slide="prev"><i class="fa fa-caret-left" aria-hidden="true"></i></a> | |
| <a class="right carousel-control" href=".placeCarousel" data-slide="next"><i class="fa fa-caret-right" aria-hidden="true"></i></a> | |
| </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
| $('.placeCarousel .item').each(function(){ | |
| var itemToClone = $(this); | |
| for (var i=1;i<3;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)); | |
| } | |
| }); |
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
| .placeCarousel | |
| .item | |
| img | |
| position: relative !important | |
| .cloneditem-1, | |
| .cloneditem-2 | |
| display: none | |
| .carousel-inner | |
| @media all and (min-width: 768px) | |
| @media (transform-3d), (-webkit-transform-3d) | |
| > .item.active.right, | |
| > .item.next | |
| transform: translate3d(50%, 0, 0) | |
| left: 0 | |
| > .item.active.left, | |
| > .item.prev | |
| transform: translate3d(-50%, 0, 0) | |
| left: 0 | |
| > .item.left, | |
| > .item.prev.right, | |
| > .item.active | |
| transform: translate3d(0, 0, 0) | |
| left: 0 | |
| > .active.left, | |
| > .prev | |
| left: -50% | |
| > .active.right, | |
| > .next | |
| left: 50% | |
| > .left, | |
| > .prev.right, | |
| > .active | |
| left: 0 | |
| .cloneditem-1 | |
| display: block | |
| @media all and (min-width: 992px) | |
| @media (transform-3d), (-webkit-transform-3d) | |
| > .item.active.right, | |
| > .item.next | |
| transform: translate3d(33%, 0, 0) | |
| left: 0 | |
| > .item.active.left, | |
| > .item.prev | |
| transform: translate3d(-33%, 0, 0) | |
| left: 0 | |
| > .item.left, | |
| > .item.prev.right, | |
| > .item.active | |
| transform: translate3d(0, 0, 0) | |
| left: 0 | |
| > .active.left, | |
| > .prev | |
| left: -33% | |
| > .active.right, | |
| > .next | |
| left: 33% | |
| > .left, | |
| > .prev.right, | |
| > .active | |
| left: 0 | |
| .cloneditem-1, | |
| .cloneditem-2 | |
| display: block |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment