Created
November 10, 2019 16:22
-
-
Save soeminnminn/8e8f4406357fb7fba5ba132bf99b1914 to your computer and use it in GitHub Desktop.
Carousel Edited Infinite Loop (cherwin) (https://bootsnipp.com/snippets/qrX7g)
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <meta name="source" content="https://bootsnipp.com/snippets/qrX7g"> | |
| <title>Carousel Edited Infinite Loop (cherwin)</title> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> | |
| <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> | |
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> | |
| <style> | |
| @media (min-width: 768px) { | |
| /* show 3 items */ | |
| .carousel-inner .active, | |
| .carousel-inner .active+.carousel-item, | |
| .carousel-inner .active+.carousel-item+.carousel-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-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, | |
| .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)+.carousel-item+.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+.carousel-item { | |
| position: absolute; | |
| top: 0; | |
| right: -25%; | |
| 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, | |
| .carousel-item-next.carousel-item-left+.carousel-item+.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, | |
| .carousel-item-prev.carousel-item-right+.carousel-item+.carousel-item+.carousel-item+.carousel-item { | |
| position: relative; | |
| transform: translate3d(50%, 0, 0); | |
| visibility: visible; | |
| display: block; | |
| visibility: visible; | |
| } | |
| .carousel-item { | |
| margin-right: 0%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="4000"> | |
| <div class="carousel-inner row w-100 mx-auto" role="listbox"> | |
| <div class="carousel-item col-md-3 active"> | |
| <div class="panel panel-default"> | |
| <div class="panel-thumbnail"> | |
| <a href="#" title="image 1" class="thumb"> | |
| <img class="img-fluid mx-auto d-block" src="//via.placeholder.com/200x200?text=1" alt="slide 1"> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="carousel-item col-md-3"> | |
| <div class="panel panel-default"> | |
| <div class="panel-thumbnail"> | |
| <a href="#" title="image 3" class="thumb"> | |
| <img class="img-fluid mx-auto d-block" src="//via.placeholder.com/200x200?text=2" alt="slide 2"> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="carousel-item col-md-3"> | |
| <div class="panel panel-default"> | |
| <div class="panel-thumbnail"> | |
| <a href="#" title="image 4" class="thumb"> | |
| <img class="img-fluid mx-auto d-block" src="//via.placeholder.com/200x200?text=3" alt="slide 3"> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="carousel-item col-md-3"> | |
| <div class="panel panel-default"> | |
| <div class="panel-thumbnail"> | |
| <a href="#" title="image 5" class="thumb"> | |
| <img class="img-fluid mx-auto d-block" src="//via.placeholder.com/200x200?text=4" alt="slide 4"> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="carousel-item col-md-3"> | |
| <div class="panel panel-default"> | |
| <div class="panel-thumbnail"> | |
| <a href="#" title="image 6" class="thumb"> | |
| <img class="img-fluid mx-auto d-block" src="//via.placeholder.com/200x200?text=5" alt="slide 5"> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="carousel-item col-md-3"> | |
| <div class="panel panel-default"> | |
| <div class="panel-thumbnail"> | |
| <a href="#" title="image 7" class="thumb"> | |
| <img class="img-fluid mx-auto d-block" src="//via.placeholder.com/200x200?text=6" alt="slide 6"> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="carousel-item col-md-3"> | |
| <div class="panel panel-default"> | |
| <div class="panel-thumbnail"> | |
| <a href="#" title="image 8" class="thumb"> | |
| <img class="img-fluid mx-auto d-block" src="//via.placeholder.com/200x200?text=7" alt="slide 7"> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="carousel-item col-md-3"> | |
| <div class="panel panel-default"> | |
| <div class="panel-thumbnail"> | |
| <a href="#" title="image 2" class="thumb"> | |
| <img class="img-fluid mx-auto d-block" src="//via.placeholder.com/200x200?text=8" alt="slide 8"> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="carousel-item col-md-3"> | |
| <div class="panel panel-default"> | |
| <div class="panel-thumbnail"> | |
| <a href="#" title="image 2" class="thumb"> | |
| <img class="img-fluid mx-auto d-block" src="//via.placeholder.com/200x200?text=9" alt="slide 9"> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <a class="carousel-control-prev" href="#myCarousel" 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 text-faded" href="#myCarousel" role="button" data-slide="next"> | |
| <span class="carousel-control-next-icon" aria-hidden="true"></span> | |
| <span class="sr-only">Next</span> | |
| </a> | |
| </div> | |
| </div> | |
| <script language="javascript"> | |
| $('#myCarousel').on('slide.bs.carousel', function (e) { | |
| var $e = $(e.relatedTarget); | |
| var idx = $e.index(); | |
| var itemsPerSlide = 4; | |
| var totalItems = $('.carousel-item').length; | |
| if (idx >= totalItems - (itemsPerSlide - 1)) { | |
| var it = itemsPerSlide - (totalItems - idx); | |
| for (var i = 0; i < it; i++) { | |
| if (e.direction == "left") { | |
| $('.carousel-item').eq(i).appendTo('.carousel-inner'); | |
| } else { | |
| $('.carousel-item').eq(0).appendTo('.carousel-inner'); | |
| } | |
| } | |
| } | |
| }); | |
| $('#myCarousel').carousel({ | |
| interval: 2000 | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment