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

BODY SLIDER-7
BODY BACKGROUND SLIDER-7
Αυτό το body slider μπορεί να μπεί μέσα σε ένα HTML / JAVASCRIPT gadget κουτάκι που υπάρχει στην διάταξη του blog σας είτε σε πλευρική μπάρα είτε στο υποσέλιδο, αλλά μπορεί επίσης να μπεί και μέσα στον κώδικα HTML του blog σας πρίν την ετικέτα </head>.  Απλά αντιγράψτε και επικολλήστε τον παρακάτω κώδικα σε όποιοδήποτε gadget θέλετε ή μέσα στον κυρίως κώδικα του blog σας αλλάζοντας αν θέλετε τα πράσινα links των εικόνων με τα links των εικόνων της αρεσκείας σας. Αν θέλετε να προσθέσετε περισσότερες είκόνες πρέπει να βάλετε πρώτα τα link τους εντός του <script>.


ΔΕΙΤΕ ΤΟ ΣΕ ΛΕΙΤΟΥΡΓΙΑ ΕΔΩ ►

ΚΩΔΙΚΑΣ ΜΕ 5 ΕΙΚΟΝΕΣ

<style>
html, body {margin:0;padding:0}
body {background:#173377;}
.container {margin:0;padding:0;width:1600px;height:900px;position: relative;}
.container .slide {
  z-index: 1;
  margin:0;padding:0;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 100%;
  transition: opacity 1s ease-in-out;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;}
.container .slide.show {opacity: 1;}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script>
function cycleBackgrounds() {
  var index = 0;
  $imageEls = $('.container .slide');
  setInterval(function () {
    index = index + 1 < $imageEls.length ? index + 1 : 0;
    $imageEls.eq(index).addClass('show');
    $imageEls.eq(index - 1).removeClass('show');
  }, 4000);
};
// Document Ready.
$(function () {
  cycleBackgrounds();
}); 
</script> 
<div class="container"> 
  <div class="slide show" style="background-image: url('http://i.imgur.com/fiVofHI.jpg');"></div>
  <div class="slide" style="background-image: url('http://i.imgur.com/rcivwQJ.jpg');"></div>
  <div class="slide" style="background-image: url('http://i.imgur.com/0nyxX2L.jpg');"></div>
  <div class="slide" style="background-image: url('http://i.imgur.com/rcivwQJ.jpg');"></div>
  <div class="slide" style="background-image: url('http://i.imgur.com/0nyxX2L.jpg');"></div>
</div>

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

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

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

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