• SANTORINI

    SANTORINI

  • SANTORINI

    SANTORINI

  • ZAKYNTHOS

    ZAKYNTHOS

  • LEYKADA

    LEYKADA

  • KEFALLONIA

    KEFALLONIA

  • KERKYRA

    KERKYRA

  • RODOS

    RODOS

GADGETS FOR BLOGS

YouTube GITHUB glitch.com JSBIN Start.me JSFIDDLE CODEPLY PASTEBIN.COM Repl.it CODEPEN CODEPEN

BOOTSTRAP CAROUSEL SLIDESHOW-6

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

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

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

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

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.