SIMPLE SLIDESHOW WITH NAVIGATION BUTTONS No 2

SIMPLE SLIDESHOW WITH NAVIGATION BUTTONS No 2

Με τον παρακάτω κώδικα μπορούμε να βάλουμε στο blog μας ένα απλό slideshow με κουμπιά εναλλαγής μεταξύ των εικόνων, με όσες εικόνες θέλουμε, με ότι διαστάσεις θέλουμε. Αλλάξτε τα πράσινα links των εικόνων με τις δικές σας εικόνες.

Αλλάξτε τις διαστάσεις του slideshow αλλάζοντας το width 808px στην 3^η γραμμή κώδικα και το width="800" height="450" που υπάρχει σε κάθε μία από τις 6 εικόνες που περιέχει το slideshow. Αλλάξτε τις περιγραφές μου έχω επισημάνει με κίτρινα γράμματα με τις δικές σας περιγραφές. Μπορείτε να επικολλήσετε τον παρακάτω κώδικα και μεσα σε κουτάκι gadget αλλά και μέσα στην ανάρτηση σας όπως το βλέπετε στο τέλος αυτής της ανάρτησης.

ΔΕΙΤΕ ΤΟ ΣΕ ΛΕΙΤΟΥΡΓΙΑ ΚΑΙ ΣΤΟ DEMO BLOG MOY ΕΔΩ ►

<style>

body {font:16px arial;margin:0;padding:0;}

.wrapper {position:relative;top:0px;left:0px;width:808px;margin:0;background:#115599;}

.scriptSlide {animation-name: slideDiv;animation-duration: 1s}

.col {border:4px solid #FF0000;padding:0px}

@keyframes slideDiv {from{opacity:0} to {opacity:1}}

</style> 

<div class="wrapper">   

<div class="main-tab">     

<div class="01-tab col scriptSlide">

<a style="background:#FF0000;color:#FFF;font:20px arial;padding:5px;">SANTORINI</a>

<a href="https://i.imgur.com/phbIVY1.jpg"><img src="https://i.imgur.com/phbIVY1.jpg" alt="SANTORINI" title="SANTORINI" width="800" height="450"/></a>

<a style="background:#740777;color:#FFF;font:15px arial;padding:5px;">SANTORINI VOLCANE VIEW</a>

</div>

<div class="02-tab col scriptSlide">

<a style="background:#FF0000;color:#FFF;font:20px arial;padding:5px;">SANTORINI</a>

<a href="https://i.imgur.com/Jrw6vMy.jpg"><img src="https://i.imgur.com/Jrw6vMy.jpg" alt="SANTORINI" title="SANTORINI" width="800" height="450"/></a>

<a style="background:#740777;color:#FFF;font:15px arial;padding:5px;">SANTORINI SUNSET WITH VOLCANE VIEW</a>

</div>

<div class="03-tab col scriptSlide">

<a style="background:#FF0000;color:#FFF;font:20px arial;padding:5px;">LEYKADA</a>

<a href="https://i.imgur.com/V4V4YZI.jpg"><img src="https://i.imgur.com/V4V4YZI.jpg" alt="LEYKADA" title="LEYKADA" width="800" height="450"/></a>  

<a style="background:#740777;color:#FFF;font:15px arial;padding:5px;">LEYKADA A BOAT IN THE SEA</a>

</div>

<div class="04-tab col scriptSlide">

<a style="background:#FF0000;color:#FFF;font:20px arial;padding:5px;">LEYKADA</a>

<a href="https://i.imgur.com/ylGwxG.jpg"><img src="https://i.imgur.com/ylGwxGw.jpg" alt="LEYKADA" title="LEYKADA" width="800" height="450"/></a>  

<a style="background:#740777;color:#FFF;font:15px arial;padding:5px;">LEYKADA PORTO KATSIKI</a>

</div>

<div class="05-tab col scriptSlide">

<a style="background:#FF0000;color:#FFF;font:20px arial;padding:5px;">KERKYRA</a>

<a href="https://i.imgur.com/X1GGnpj.jpg"><img src="https://i.imgur.com/X1GGnpj.jpg" alt="KERKYRA" title="KERKYRA" width="800" height="450"/></a>  

<a style="background:#740777;color:#FFF;font:15px arial;padding:5px;">KERKYRA PALAIOKASTRITSA BEACH</a>

</div>

<div class="06-tab col scriptSlide">

<a style="background:#FF0000;color:#FFF;font:20px arial;padding:5px;">KERKYRA</a>

<a href="https://i.imgur.com/HD6dsKg.jpg"><img src="https://i.imgur.com/HD6dsKg.jpg" alt="KERKYRA" title="KERKYRA" width="800" height="450"/></a>  

<a style="background:#740777;color:#FFF;font:15px arial;padding:5px;">KERKYRA PALAIOKASTRITSA BEACH AERIAL VIEW</a>

</div>

</div>

<button style="position:relative;left:300px;background:#FF99AA;" onclick="plusDivs(-1)">◄ PREVIUS</button>

<button style="position:relative;left:320px;background:#00FF00;" onclick="plusDivs(1)">NEXT ►</button>

</div>

 <script>

 var slideIndex = 1;

                showDiv(slideIndex);               

                function plusDivs(n) {

                  showDiv(slideIndex += n);}

                function showDiv(n) {

                  var i;

                  var x = document.getElementsByClassName("scriptSlide");                 

                  if (n > x.length) {slideIndex = 1;}   

                  if (n < 1) {slideIndex = x.length}

                  for (i = 0; i < x.length; i++) {

                  x[i].style.display = "none";}

                  x[slideIndex-1].style.display = "block";}

</script>

SANTORINI SANTORINI VOLCANE VIEW

SANTORINI SANTORINI SUNSET WITH VOLCANE VIEW

LEYKADA LEYKADA A BOAT IN THE SEA

LEYKADA LEYKADA PORTO KATSIKI

KERKYRA KERKYRA PALAIOKASTRITSA BEACH

KERKYRA KERKYRA PALAIOKASTRITSA BEACH AERIAL VIEW