• 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-4

BOOTSTRAP CAROUSEL SLIDESHOW-4
Στο παρακάτω slideshow μπορείτε να βάλετε όσες εικόνες θέλετε, σε ότι διαστάσεις θέλετε. Το συγκεκριμένο slideshow προβάλει 1 εικόνα σε κάθε πέρασμα και την εναλλάσει προς τα επάνω. Διαθέτει κουμπιά πλοήγησης για να βλέπετε τις επόμενες ή τις προηγούμενες εικόνες του, και ξεκινάει αυτόματα. Επίσης έχει πολύ χώρο δίπλα του για να βάλετε τίτλο και εκτενή περιγραφή για τις εικόνες που προβάλετε. Αλλάξετε τα 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
70
71
<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>
<style>
h3{font-size: 20px;font-family:arial;color:#FFFF00;}
img {width: 640px;}
.carousel-inner {background-color:#333;}
.carousel-caption {font-size:20px;font-family:arial;color:#FFFF00;right: 10%;left: 60%;top: 30%;bottom: 30%;text-align: left;text-shadow: none;}
.carousel-indicators{font-size:20px;font-family:arial;color:#FFFF00;bottom: -1%;text-align: left;text-shadow: none;}
.carousel.vertical .carousel-inner {height:360px;}
.carousel.vertical .item {
-webkit-transition: 0.6s ease-in-out top;
-moz-transition:    0.6s ease-in-out top;
-ms-transition:     0.6s ease-in-out top;
-o-transition:      0.6s ease-in-out top;left:0;}
.carousel.vertical .active,
.carousel.vertical .next.left,
.carousel.vertical .prev.right {top:0;}
.carousel.vertical .next,
.carousel.vertical .active.right {top:100%;}
.carousel.vertical .prev,
.carousel.vertical .active.left {top:-100%;}        
</style>

<div class="container">
<div id="carousel-demo" class="carousel vertical slide" data-ride="carousel" data-interval="4000">
<ol class="carousel-indicators">
    <li data-target="#carousel-demo" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-demo" data-slide-to="1"></li>
    <li data-target="#carousel-demo" data-slide-to="2"></li>
    <li data-target="#carousel-demo" data-slide-to="3"></li>
 <li data-target="#carousel-demo" data-slide-to="4"></li>
</ol>
<div class="carousel-inner"> 
<div class="item active"> 
<img src="https://i.imgur.com/7EhHs3Tl.jpg" alt="RODOS"> 
<div class="carousel-caption"><h3>RODOS ISLAND</h3>
<p>Palace of the Grand Master of the Knights of Rhodes. View from sea.</p>
</div>
</div> 
<div class="item"> 
<img src="https://i.imgur.com/8kvUHbSl.png" alt="RODOS"> 
<div class="carousel-caption"><h3>RODOS ISLAND</h3>
<p>RODOS ISLAND. Aerial view of port</p>
</div>      
</div> 
<div class="item"> 
<img src="https://i.imgur.com/nI47JENl.jpg" alt="RODOS"> 
<div class="carousel-caption"><h3>RODOS ISLAND</h3>
<p>Rodos island. Beach with sea sports</p>
</div>          
</div>
<div class="item"> 
<img src="https://i.imgur.com/3SRq2CRl.jpg" alt="RODOS"> 
<div class="carousel-caption"><h3>RODOS ISLAND</h3>
<p>Palace of the Grand Master of the Knights of Rhodes. View from sea.</p>
</div>          
</div>
<div class="item"> 
<img src="https://i.imgur.com/km1FGXdl.jpg" alt="RODOS">
<div class="carousel-caption"><h3>RODOS ISLAND</h3>
<p>Rodos town aerial view.</p>
</div>           
</div>     
</div> 
<a class="left carousel-control" href="#carousel-demo" data-slide="prev">
<span class="glyphicon glyphicon-chevron-up"></span></a>
<a class="right carousel-control" href="#carousel-demo" data-slide="next">
<span class="glyphicon glyphicon-chevron-down"></span></a>
</div>
</div>

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

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

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

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