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

BOOTSTRAP CAROUSEL SLIDESHOW-2
Στο παρακάτω slideshow μπορείτε να βάλετε όσες εικόνες θέλετε, σε ότι διαστάσεις θέλετε. Το συγκεκριμένο slideshow διαθέτει και κουμπιά πλοήγησης για να βλέπετε τις επόμενες ή τις προηγούμενες εικόνες του, αλλα δεν ξεκινάει αυτόματα. Αλλάξετε τα 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
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"> </script>
<style>
.frame, .slide {width: 800px;height:450px;}
.frame {overflow: hidden;position: relative;}
.tray {position: relative;}
.slide {float: left; }
.prev, .next {position: absolute;top:200px;margin:1px;color:#115599;}
.prev { left: 0; }
.next {right: 0; }
img, table, video. iframe {width: 100%;max-width: 100%;}
</style>
<div class="frame">
<div class="tray">
<div class="slide"><img src="https://i.imgur.com/b5PT6UY.jpg" width="800" height="450"></div>
<div class="slide"><img src="https://i.imgur.com/LbXM96z.jpg" width="800" height="450"> </div>
<div class="slide"><img src="https://i.imgur.com/yGKZhUp.jpg" width="800" height="450"> </div>
<div class="slide"><img src="https://i.imgur.com/FjoU5XT.jpg" width="800" height="450"></div>
</div>
<a class="prev" href="#"><i class="fa fa-chevron-left fa-2x"></i></a>
<a class="next" href="#"><i class="fa fa-chevron-right fa-2x"></i></a>
</div>
<script>
$(function(){
  var slideWidth = $('.slide').width(),
      position = 0,
      numSlides = $('.slide').size(),
      trayWidth = slideWidth * numSlides;
  $('.tray').width(trayWidth);
  function slide() {
    var distance = slideWidth * position;
    $('.tray').animate({right: distance}, 600);}
  $('.next').click(function () {
    if (position === numSlides - 1) {
      position = 0;
    } else {
      position += 1;}
    slide();});
  $('.prev').click(function () {
    if (position === 0) {
      position = numSlides - 1;
    } else {
      position -= 1;}
    slide();});
  $('.prev, .next').hide();
  $('.frame').hover(function () {
    $('.prev, .next').show();
  }, function() {
    $('.prev, .next').hide();});});</script>

2 σχόλια:

  1. ΔΡΩΜΕΝΑ ΤΟΥ ΤΟΠΟΥ ΜΑΣ26/4/15 16:11

    Καλησπερα.Εκανα οτι γραφετε αλλα δεν μπορω να καταλαβω γιατι οταν παιρνω ολο τον κωδικα δεν μου εμφανιζει καθολου εικονα.Μου εμφανιζει τον κωδικα σε γραμματα...

    ΑπάντησηΔιαγραφή
  2. BLOGGER EXPERT26/4/15 21:57

    Θα δουλέψει θέλει περίπου 3-6 ώρες να ενημερωθεί το νέο άλμπουμ του picassa το οποίο πρέπει να είναι δημόσιο. Απο τη στιγμή που έγινε δημόσιο θέλει κάποιες ώρες για να το εμφανίσει. Αν δοκιμάσεις με παλαιότερα άλμπουν του picassa που έιναι ήδη δημόσια θα δείς ότι θα τα εμφανίσει. Προκειται για το πιο πρακτικό slideshow.

    ΑπάντησηΔιαγραφή

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

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