BOOTSTRAP CAROUSEL SLIDESHOW-3

BOOTSTRAP CAROUSEL SLIDESHOW-3

Στο παρακάτω slideshow μπορείτε να βάλετε όσες εικόνες θέλετε, σε ότι διαστάσεις θέλετε. Το συγκεκριμένο slideshow προβάλει 4 εικόνες ταυτόχρονα και εναλλάσει σε κάθε πέρασμά του μία εικόνα. Διαθέτει κουμπιά πλοήγησης για να βλέπετε τις επόμενες ή τις προηγούμενες εικόνες του, και ξεκινάει αυτόματα. Αλλάξετε τα linksτων εικόνων μου μου με τα δικά σας links εικόνων.

ΔΕΙΤΕ ΤΟ ΣΕ ΛΕΙΤΟΥΡΓΙΑ ΣΕ ΕΝΑ DEMO BLOG ΕΔΩ ►

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script> jQuery(document).ready(function() { jQuery('.carousel[data-type="multi"] .item').each(function(){ var next = jQuery(this).next(); if (!next.length) {next = jQuery(this).siblings(':first');} next.children(':first-child').clone().appendTo(jQuery(this)); for (var i=0;i<2;i++) {next=next.next(); if (!next.length) {next = jQuery(this).siblings(':first');} next.children(':first-child').clone().appendTo($(this));}});}); </script> <style> .carousel-control.left, .carousel-control.right {background:none;} .img-responsive{width:100%;height:auto;} @media (min-width: 992px ) { .carousel-inner .active.left {left: -25%;} .carousel-inner .next {left: 25%;} .carousel-inner .prev {left: -25%;}} @media (min-width: 768px) and (max-width: 991px ) { .carousel-inner .active.left {left: -33.3%;} .carousel-inner .next {left: 33.3%;} .carousel-inner .prev {left: -33.3%;} .active > div:first-child {display:block;} .active > div:first-child + div {display:block;} .active > div:last-child {display:none;}} @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;}} </style> <div class="container"> <div class="container text-center"> <div class="carousel slide row" data-ride="carousel" data-type="multi" data-interval="2000" id="fruitscarousel"> <div class="carousel-inner"> <div class="item active"> <div class="col-md-3 col-sm-4 col-xs-12"><a href="#"><img src="https://i.imgur.com/7EhHs3Tm.jpg" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-md-3 col-sm-4 col-xs-12"><a href="#"><img src="https://i.imgur.com/8kvUHbSm.png" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-md-3 col-sm-4 col-xs-12"><a href="#"><img src="https://i.imgur.com/nI47JENm.jpg" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-md-3 col-sm-4 col-xs-12"><a href="#"><img src="https://i.imgur.com/km1FGXdm.jpg" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-md-3 col-sm-4 col-xs-12"><a href="#"><img src="https://i.imgur.com/eHaD7hDm.jpg" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-md-3 col-sm-4 col-xs-12"><a href="#"><img src="https://i.imgur.com/qegKUrFm.jpg" class="img-responsive"></a></div> </div> </div> <a class="left carousel-control" href="#fruitscarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> <a class="right carousel-control" href="#fruitscarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> </div></div></div>