<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="col-md-12 text-center"> <h3>Product Carousel Bootstrap 3.2</h3> </div> <div class="col-md-10 col-md-offset-1"> <div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="3000" id="myCarousel"> <div class="carousel-inner"> <div class="item active"> <div class="col-md-2 col-sm-6 col-xs-12"> <a href="#"><img src="https://maxcdn.icons8.com/iOS7/PNG/75/Clothing/t_shirt-75.png" class="img-responsive"></a> </div> </div> <div class="item"> <div class="col-md-2 col-sm-6 col-xs-12"> <a href="#"><img src="https://maxcdn.icons8.com/iOS7/PNG/75/Clothing/skirt-75.png" class="img-responsive"></a> </div> </div> <div class="item"> <div class="col-md-2 col-sm-6 col-xs-12"> <a href="#"><img src="https://maxcdn.icons8.com/iOS7/PNG/75/Clothing/flip_flops-75.png" class="img-responsive"></a> </div> </div> <div class="item"> <div class="col-md-2 col-sm-6 col-xs-12"> <a href="#"><img src="https://maxcdn.icons8.com/iOS7/PNG/75/Clothing/socks-75.png" class="img-responsive"></a> </div> </div> <div class="item"> <div class="col-md-2 col-sm-6 col-xs-12"> <a href="#"><img src="https://maxcdn.icons8.com/iOS7/PNG/75/Cultures/viking_helmet-75.png" class="img-responsive"></a> </div> </div> <div class="item"> <div class="col-md-2 col-sm-6 col-xs-12"> <a href="#"><img src="https://maxcdn.icons8.com/iOS7/PNG/75/Clothing/shirt-75.png" class="img-responsive"></a> </div> </div> <div class="item"> <div class="col-md-2 col-sm-6 col-xs-12"> <a href="#"><img src="https://maxcdn.icons8.com/iOS7/PNG/75/Clothing/trousers-75.png" class="img-responsive"></a> </div> </div> <div class="item"> <div class="col-md-2 col-sm-6 col-xs-12"> <a href="#"><img src="https://maxcdn.icons8.com/iOS7/PNG/75/Clothing/umbrella-75.png" class="img-responsive"></a> </div> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> </div> </div>

@import url(https://fonts.googleapis.com/css?family=Lato:400,300,900,700); html { font-size: 16px; } h3 { font-family: 'Lato', sans-serif; font-size: 2.125rem; font-weight: 700; color: #444; letter-spacing: 1px; text-transform: uppercase; margin-top: 35px; } p { font-size: 1.25rem; width: 70%; margin: 35px auto; } a { color: #ddd; } a:hover { color: #ccc; text-decoration: none; } span { color: blue; font-weight: bold; } .carousel-inner { margin: auto; width: 90%; } .carousel-control { width: 4%; } .carousel-control.left, .carousel-control.right { background-image: none; } .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right { margin-top: -10px; margin-left: -10px; color: #444; } .carousel-inner a { display: table-cell; height: 180px; width: 200px; vertical-align: middle; } .carousel-inner img { max-height: 150px; margin: auto auto; max-width: 100%; } @media (max-width: 767px) { .carousel-inner .active.left { left: -100%; } .carousel-inner .next { left: 100%; } .carousel-inner .prev { left: -100%; } .active > div { display: none; } .active > div:first-child { display: block; } } @media (min-width: 767px) and (max-width: 992px) { .carousel-inner .active.left { left: -50%; } .carousel-inner .next { left: 50%; } .carousel-inner .prev { left: -50%; } .active > div { display: none; } .active > div:first-child { display: block; } .active > div:first-child + div { display: block; } } @media (min-width: 992px) { .carousel-inner .active.left { left: -16.7%; } .carousel-inner .active.right { left: 16.7%; } .carousel-inner .next { left: 16.7%; } .carousel-inner .prev { left: -16.7%; } .carousel-inner { margin: auto; width: 1000px; } }

$('.carousel[data-type="multi"] .item').each(function(){ var next = $(this).next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); for (var i=0;i<4;i++) { next=next.next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); } });