GADGETS FOR BLOGS

Facebook Google plus YouTube Pinterest Tumblr DIIGO Start.me feedburner

BOOTSTRAP CAROUSEL SLIDESHOW ME NAVIGATION BUTTONS ΚΑΙ ΠΕΡΙΓΡΑΦΗ

CAROUSEL SLIDESHOW
BOOTSTRAP CAROUSEL SLIDESHOW ME NAVIGATION BUTTONS ΚΑΙ ΠΕΡΙΓΡΑΦΗ
Στο παρακάτω slideshow μπορείτε να βάλετε όσες εικόνες θέλετε, σε ότι διαστάσεις θέλετε, και σε κάθε μία από αυτές να εμφανίζεται κάτω αριστερά η περιγραφή που θέλετε. Το συγκεκριμένο slideshow διαθέτει και κουμπιά πλοήγησης για να βλέπετε τις επόμενες ή τις προηγούμενες εικόνες του.
Αλλάξετε τα πράσινα links μου με τα δικά σας links εικόνων. Τις διαστάσεις του slideshow τις αλλάζετε στην πρώτη γραμμή του κώδικα css (style) εκεί που γράφει width:960px;
Οι διαστάσεις των εικόνων πρέπει να είναι ίδιες με το σκελετό του slideshow, και τις αλλάζετε κάθε μία εικόνα ξεχωριστά εκεί που γράφει width="960" height="600".  Ο χρόνος εναλλαγής είναι στη 2η γραμμή του κώδικα html εκεί που γράφει data-interval="3000" το αλλάζετε σε μεγαλύτερο ή μικρότερο. 

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

<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>
.carousel {background:#115599;margin:0px;padding:0px;width:960px;}
.carousel .item img {margin:0 auto;}
.bs-example {margin:0px;}
.carousel-caption {background: rgba(0,0,0, 0.7); padding:2px;width:320px;text-align:left;left:5px;bottom:5px;}
</style>

<div class="bs-example">
<div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
<div class="carousel-inner">
<div class="active item">
<img src="http://i.imgur.com/Pq9Dexah.jpg" width="960" height="600"><div class="carousel-caption">KERKYRA PALAIOKASTRITSA</div></div>
<div class="item">
<img src="http://i.imgur.com/kbCkBYeh.jpg" width="960" height="600"><div class="carousel-caption">PAXOI</div></div>
<div class="item">
<img src="http://i.imgur.com/gCr4ycDh.jpg" width="960" height="600"><div class="carousel-caption">LEYKADA PORTO KATSIKI</div></div>
<div class="item">
<img src="http://i.imgur.com/JcRaeRSh.jpg" width="960" height="600"><div class="carousel-caption">ITHAKI</div></div>
<div class="item">
<img src="http://i.imgur.com/XMS6PHsh.jpg" width="960" height="600"><div class="carousel-caption">KEFALONIA MYRTOS</div></div>
<div class="item">
<img src="http://i.imgur.com/I9SFA0sh.jpg" width="960" height="600"><div class="carousel-caption">ZAKYNTHOS NAYAGIO</div></div>
<div class="item">
<img src="http://i.imgur.com/m1fdFmFh.jpg" width="960" height="600"><div class="carousel-caption">KYTHYRA</div></div></div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="carousel-control right" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div></div>

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".