Το παρακάτω slideshow ξεκινάει αυτόματα μόνο του και μπορεί να κάνει εναλλαγή μεταξύ κειμένου και εικόνων. Το κείμενο μπορείτε να το βάλετε μόνο στην αρχή ή μόνο στο τέλος ή όπου θέλετε ενδιάμεσα στις εικόνες, ακόμα και να το παραλείψετε. Αλλάξτε τα δικά μου links εικόνων με τα δικά σας links. Αλλάξτε τα κείμενα με δικά σας. Αλλάξτε τις διαστάσεις του slideshow εκεί που γράφει width:960px; height:600px; και προσέξτε να είναι ίδιες με αυτές των εικόνων σας οι οποίες καλό θα ήταν να έχουν όλες αν όχι την ίδια διάσταση οποσδήποτε όμως την ίδια αναλογία για να ταιριάζουν με τις διαστάσεις του slideshow. Ο χρόνος εναλλαγής μεταξύ των εικόνων αλλάζει εκεί που γράφει .appendTo(‘#slideshow’);}, 4000); Δείτε το slideshow σε λειτουργία ακριβώς κάτω απο εδώ.
.
.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<div id="slideshow">
<div id="sampletext">ΟΙ 5 ΚΑΛΥΤΕΡΕΣ ΕΛΛΗΝΙΚΕΣ ΠΑΡΑΛΙΕΣ</br>ΠΑΡΑΛΙΑ Νο 1</br>ΝΑΥΑΓΙΟ ΖΑΚΥΝΘΟΣ</div>
<div><img src="https://i.imgur.com/fiVofHI.jpg" alt="ΖΑΚΥΝΘΟΣ" width="960" height="600"></div>
<div id="sampletext">ΟΙ 5 ΚΑΛΥΤΕΡΕΣ ΕΛΛΗΝΙΚΕΣ ΠΑΡΑΛΙΕΣ</br>ΠΑΡΑΛΙΑ Νο 2</br>ΠΟΡΤΟ ΚΑΤΣΙΚΙ ΛΕΥΚΑΔΑ</div>
<div><img src="https://i.imgur.com/rcivwQJ.jpg" alt="ΛΕΥΚΑΔΑ" width="960" height="600"></div>
<div id="sampletext">ΟΙ 5 ΚΑΛΥΤΕΡΕΣ ΕΛΛΗΝΙΚΕΣ ΠΑΡΑΛΙΕΣ</br>ΠΑΡΑΛΙΑ Νο 3</br>ΜΥΡΤΟΣ ΚΕΦΑΛΛΟΝΙΑ</div>
<div><img src="https://i.imgur.com/0nyxX2L.jpg" alt="ΚΕΦΑΛΛΟΝΙΑ" width="960" height="600"></div>
<div id="sampletext">ΟΙ 5 ΚΑΛΥΤΕΡΕΣ ΕΛΛΗΝΙΚΕΣ ΠΑΡΑΛΙΕΣ</br>ΠΑΡΑΛΙΑ Νο 4</br>ΚΟΥΚΟΥΝΑΡΙΕΣ ΣΚΙΑΘΟΣ</div>
<div><img src="https://i.imgur.com/oSC4D7R.jpg" alt="ΣΚΙΑΘΟΣ" width="960" height="600"></div>
<div id="sampletext">ΟΙ 5 ΚΑΛΥΤΕΡΕΣ ΕΛΛΗΝΙΚΕΣ ΠΑΡΑΛΙΕΣ</br>ΠΑΡΑΛΙΑ Νο 5</br>ΕΓΓΡΕΜΝΟΙ ΛΕΥΚΑΔΑ</div>
<div><img src="https://i.imgur.com/H2PNDWB.jpg" alt="ΛΕΥΚΑΔΑ" width="960" height="600"></div></div>
<style>
#sampletext {position:relative; width:960px; height:600px;font :bold 48px Arial;background:#115599;color:#FFF;}
#slideshow > div {position:relative;top: 0px;left: 0px;right: 0px;bottom: 0px;}
</style>
<script>
$("#slideshow > div:gt(0)").hide();
setInterval(function() {$('#slideshow > div:first')
.fadeOut(0)
.next()
.fadeIn(0)
.end()
.appendTo('#slideshow');}, 4000);
</script>
