<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,700&subset=latin-ext" rel="stylesheet"> <!--Item slider text--> <div class="container"> <div class="row" id="slider-text"> <div class="col-md-6" > <h2>NEW COLLECTION</h2> </div> </div> </div> <!-- Item slider--> <div class="container-fluid"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="carousel carousel-showmanymoveone slide" id="itemslider"> <div class="carousel-inner"> <div class="item active"> <div class="col-xs-12 col-sm-6 col-md-2"> <a href="#"><img src="https://s12.postimg.org/655583bx9/item_1_180x200.png" class="img-responsive center-block"></a> <h4 class="text-center">MAYORAL SUKNJA</h4> <h5 class="text-center">4000,00 RSD</h5> </div> </div> <div class="item"> <div class="col-xs-12 col-sm-6 col-md-2"> <a href="#"><img src="https://s12.postimg.org/41uq0fc4d/item_2_180x200.png" class="img-responsive center-block"></a> <h4 class="text-center">MAYORAL KOŠULJA</h4> <h5 class="text-center">4000,00 RSD</h5> </div> </div> <div class="item"> <div class="col-xs-12 col-sm-6 col-md-2"> <a href="#"><img src="https://s12.postimg.org/dawwajl0d/item_3_180x200.png" class="img-responsive center-block"></a> <span class="badge">10%</span> <h4 class="text-center">PANTALONE TERI 2</h4> <h5 class="text-center">4000,00 RSD</h5> <h6 class="text-center">5000,00 RSD</h6> </div> </div> <div class="item"> <div class="col-xs-12 col-sm-6 col-md-2"> <a href="#"><img src="https://s12.postimg.org/5w7ki5z4t/item_4_180x200.png" class="img-responsive center-block"></a> <h4 class="text-center">CVETNA HALJINA</h4> <h5 class="text-center">4000,00 RSD</h5> </div> </div> <div class="item"> <div class="col-xs-12 col-sm-6 col-md-2"> <a href="#"><img src="https://s12.postimg.org/e2zk9qp7h/item_5_180x200.png" class="img-responsive center-block"></a> <h4 class="text-center">MAJICA FOTO</h4> <h5 class="text-center">4000,00 RSD</h5> </div> </div> <div class="item"> <div class="col-xs-12 col-sm-6 col-md-2"> <a href="#"><img src="https://s12.postimg.org/46yha3jfh/item_6_180x200.png" class="img-responsive center-block"></a> <h4 class="text-center">MAJICA MAYORAL</h4> <h5 class="text-center">4000,00 RSD</h5> </div> </div> </div> <div id="slider-control"> <a class="left carousel-control" href="#itemslider" data-slide="prev"><img src="https://s12.postimg.org/uj3ffq90d/arrow_left.png" alt="Left" class="img-responsive"></a> <a class="right carousel-control" href="#itemslider" data-slide="next"><img src="https://s12.postimg.org/djuh0gxst/arrow_right.png" alt="Right" class="img-responsive"></a> </div> </div> </div> </div> </div> <!-- Item slider end-->

(function(){ $('#itemslider').carousel({ interval: 300000 }); }()); (function(){ $('.carousel-showmanymoveone .item').each(function(){ var itemToClone = $(this); for (var i=1;i<6;i++) { itemToClone = itemToClone.next(); if (!itemToClone.length) { itemToClone = $(this).siblings(':first'); } itemToClone.children(':first-child').clone() .addClass("cloneditem-"+(i)) .appendTo($(this)); } }); }());