BOOTSTRAP CAROUSEL SLIDESHOW-5

BOOTSTRAP CAROUSEL SLIDESHOW-5

Στο παρακάτω 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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css"> <style> .carousel {background:#115599;margin:0;padding:0;} .carousel-control {left:-20px;} .carousel-control.right {right:-20px;} .carousel-indicators {right: 50%;top: auto;bottom: 0px;margin-right:9px;} .carousel-indicators li {background: #A11111;} .carousel-indicators .active {background: #FFFF00;} </style> <script> $(document).ready(function() { $('#myCarousel').carousel({ interval:3000})}); </script> <div class="container"><div class="row"><div class="span12"><div class="well"> <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"><div class="item active"><div class="row-fluid"> <div class="span3"><a href="#x" class="thumbnail"><img src="http://i.imgur.com/fiVofHIm.jpg" width="248" height="155" alt="Image" style="max-width:100%;" /></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://i.imgur.com/rcivwQJm.jpg" width="248" height="155"alt="Image" style="max-width:100%;" /></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://i.imgur.com/0nyxX2Lm.jpg" width="248" height="155" alt="Image" style="max-width:100%;" /></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://i.imgur.com/gptb8xnm.jpg" width="248" height="155" alt="Image" style="max-width:100%;" /></a></div> </div></div> <div class="item"> <div class="row-fluid"> <div class="span3"><a href="#x" class="thumbnail"><img src="http://i.imgur.com/oSC4D7Rm.jpg" width="248" height="155" alt="Image" style="max-width:100%;" /></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://i.imgur.com/9GqSG9am.jpg" width="248" height="155" alt="Image" style="max-width:100%;" /></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://i.imgur.com/7X4wjWSm.jpg" width="248" height="155" alt="Image" style="max-width:100%;" /></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://i.imgur.com/kbCkBYem.jpg" width="248" height="155" alt="Image" style="max-width:100%;" /></a></div> </div></div> <div class="item"> <div class="row-fluid"> <div class="span3"><a href="#x" class="thumbnail"><img src="http://i.imgur.com/XZLp5MAm.jpg" width="248" height="155" alt="Image" style="max-width:100%;" /></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://i.imgur.com/uFoNudkm.jpg" width="248" height="155" alt="Image" style="max-width:100%;" /></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://i.imgur.com/DgCJJQem.jpg" width="248" height="155" alt="Image" style="max-width:100%;" /></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://i.imgur.com/1Yul3Hvm.jpg" width="248" height="155" alt="Image" style="max-width:100%;" /></a></div> </div></div></div> <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> </div></div></div></div></div>