• 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

BODY BACKGROUND SLIDER-2

BACKGROUND SLIDER
BODY BACKGROUND SLIDER-2
Με τον παρακάτω κώδικα μπορείτε να προβάλετε όσες εικόνες θέλετε να εναλλάσονται σαν slides στη θέση του background του ιστολογίου σας. Την ταχύτητα εναλλαγής μπορείτε να την ρυθμίσετε αλλάζοντας το {speed: 400} ενώ το χρόνο που θα παραμένει κάθε φωτογραφία μπορείτε να τον ρυθμίσετε αλλάζοντας το [index]);}, 4000); Μπορείτε να αντικαταστήσετε τα πορτοκαλί links των εικόνων με τα δικά σας link εικόνων,
οι οποίες καλό είναι να έχουν τις ίδιες διαστάσεις όπως έχουν οι παρακάτω. Ο κώδικας πρέπει να μπεί μέσα στο πρότυπο πρίν την ετικέτα </head>.

ΔΕΙΤΕ ΤΟ BACKGROUND SLIDER ΣΕ ΛΕΙΤΟΥΡΓΙΑ ΣΕ ΑΥΤΟ ΤΟ DEMO BLOG

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js''></script>
<script src='https://dl.dropboxusercontent.com/s/bdmk7tsmf2gur79/Background-slider.js'></script>
<script>
var images = [
"https://i.imgur.com/Pq9Dexa.jpg",
"https://i.imgur.com/kbCkBYe.jpg",
"https://i.imgbox.com/MIiFeUzy",
"https://i.imgbox.com/ZpvJrjg4",
"https://i.imgbox.com/4jvkDVTA",
"https://i.imgbox.com/R6GYEpSU",
"https://i.imgur.com/I9SFA0s.jpg",
"https://i.imgur.com/UMQ2IrD.jpg",
"https://i.imgur.com/l9hrZQQ.jpg",
"https://i.imgur.com/YezgGht.jpg",
"https://i.imgur.com/W8LjNt5.jpg",
"https://i.imgur.com/0pOnQXw.jpg",
"https://i.imgur.com/XZLp5MA.jpg",
"https://i.imgur.com/7X4wjWS.jpg"];
$(images).each(function(){
$('<img/>')[0].src = this;});
var index = 0;
$.backstretch(images[index], {speed: 400});
var slideshow = setInterval(function() {
index = (index >= images.length - 1) ? 0 : index + 1;
$.backstretch(images[index]);}, 4000);
</script>

1 σχόλιο:

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

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