BOOTSTRAP CAROUSEL SLIDESHOW-8

BOOTSTRAP CAROUSEL SLIDESHOW-8

Στο παρακάτω slideshow μπορείτε να βάλετε όσες εικόνες θέλετε, σε ότι διαστάσεις θέλετε. Το συγκεκριμένο slideshow προβάλει 1 εικόνα σε κάθε πέρασμα και την εναλλάσει προς τα δεξιά. Διαθέτει κουμπιά πλοήγησης και εικονίδια προεσκόπισης εικόνων (thumbnails) για να βλέπετε τις επόμενες ή τις προηγούμενες εικόνες του, και ξεκινάει αυτόματα. Αλλάξετε τα 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 63 64 65 66 67 68 69

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> .hide-bullets {list-style:none;margin:0px;padding:0;} .thumbnail {list-style:none;margin:1px;padding:0px;} .carousel-inner>.item>img, .carousel-inner>.item>a>img {list-style:none;width:auto;} </style> <script> jQuery(document).ready(function($) { $('#myCarousel').carousel({interval: 3000}); $('[id^=carousel-selector-]').click(function () { var id_selector = $(this).attr("id"); try { var id = /-(\d+)$/.exec(id_selector)[1]; console.log(id_selector, id); jQuery('#myCarousel').carousel(parseInt(id)); } catch (e) { console.log('Regex failed!', e);}}); $('#myCarousel').on('slid.bs.carousel', function (e) { var id = $('.item.active').data('slide-number'); $('#carousel-text').html($('#slide-content-'+id).html());});}); </script> <div class="container"> <div id="main_area"> <div class="row"> <div class="col-sm-6" id="slider-thumbs"> <ul class="hide-bullets"> <li class="col-sm-3"> <a class="thumbnail" id="carousel-selector-0"><img src="http://i.imgur.com/fiVofHIt.jpg"></a></li> <li class="col-sm-3"><a class="thumbnail" id="carousel-selector-1"><img src="http://i.imgur.com/rcivwQJt.jpg"></a></li> <li class="col-sm-3"><a class="thumbnail" id="carousel-selector-2"><img src="http://i.imgur.com/0nyxX2Lt.jpg"></a></li> <li class="col-sm-3"><a class="thumbnail" id="carousel-selector-3"><img src="http://i.imgur.com/gptb8xnt.jpg"></a></li> <li class="col-sm-3"><a class="thumbnail" id="carousel-selector-4"><img src="http://i.imgur.com/oSC4D7Rt.jpg"></a></li> <li class="col-sm-3"><a class="thumbnail" id="carousel-selector-5"><img src="http://i.imgur.com/9GqSG9at.jpg"></a></li> <li class="col-sm-3"><a class="thumbnail" id="carousel-selector-6"><img src="http://i.imgur.com/7X4wjWSt.jpg"></a></li> <li class="col-sm-3"><a class="thumbnail" id="carousel-selector-7"><img src="http://i.imgur.com/kbCkBYet.jpg"></a></li> <li class="col-sm-3"><a class="thumbnail" id="carousel-selector-8"><img src="http://i.imgur.com/XZLp5MAt.jpg"></a></li> <li class="col-sm-3"><a class="thumbnail" id="carousel-selector-9"><img src="http://i.imgur.com/uFoNudkt.jpg"></a></li> <li class="col-sm-3"><a class="thumbnail" id="carousel-selector-10"><img src="http://i.imgur.com/DgCJJQet.jpg"></a></li> <li class="col-sm-3"><a class="thumbnail" id="carousel-selector-11"><img src="http://i.imgur.com/1Yul3Hvt.jpg"></a></li> <li class="col-sm-3"><a class="thumbnail" id="carousel-selector-12"><img src="http://i.imgur.com/Nq06hwXt.jpg"></a></li> <li class="col-sm-3"><a class="thumbnail" id="carousel-selector-13"><img src="http://i.imgur.com/0pOnQXwt.jpg"></a></li> <li class="col-sm-3"><a class="thumbnail" id="carousel-selector-14"><img src="http://i.imgur.com/W8LjNt5t.jpg"></a></li> <li class="col-sm-3"><a class="thumbnail" id="carousel-selector-15"><img src="http://i.imgur.com/zamfiLBt.jpg"></a></li> </ul></div> <div class="col-sm-6"><div class="col-xs-12" id="slider"><div class="row"> <div class="col-sm-12" id="carousel-bounding-box"><div class="carousel slide" id="myCarousel"><div class="carousel-inner"> <div class="active item" data-slide-number="0"><img src="http://i.imgur.com/fiVofHIl.jpg"></div> <div class="item" data-slide-number="1"><img src="http://i.imgur.com/rcivwQJl.jpg"></div> <div class="item" data-slide-number="2"><img src="http://i.imgur.com/0nyxX2Ll.jpg"></div> <div class="item" data-slide-number="3"><img src="http://i.imgur.com/gptb8xnl.jpg"></div> <div class="item" data-slide-number="4"><img src="http://i.imgur.com/oSC4D7Rl.jpg"></div> <div class="item" data-slide-number="5"><img src="http://i.imgur.com/9GqSG9al.jpg"></div> <div class="item" data-slide-number="6"><img src="http://i.imgur.com/7X4wjWSl.jpg"></div> <div class="item" data-slide-number="7"><img src="http://i.imgur.com/kbCkBYel.jpg"></div> <div class="item" data-slide-number="8"><img src="http://i.imgur.com/XZLp5MAl.jpg"></div> <div class="item" data-slide-number="9"><img src="http://i.imgur.com/uFoNudkl.jpg"></div> <div class="item" data-slide-number="10"><img src="http://i.imgur.com/DgCJJQel.jpg"></div> <div class="item" data-slide-number="11"><img src="http://i.imgur.com/1Yul3Hvl.jpg"></div> <div class="item" data-slide-number="12"><img src="http://i.imgur.com/Nq06hwXl.jpg"></div> <div class="item" data-slide-number="13"><img src="http://i.imgur.com/0pOnQXwl.jpg"></div> <div class="item" data-slide-number="14"><img src="http://i.imgur.com/W8LjNt5l.jpg"></div> <div class="item" data-slide-number="15"><img src="http://i.imgur.com/zamfiLBl.jpg"></div></div> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span></a> </div></div></div></div></div></div></div></div>