• 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

CAROUSEL SCROLLING VIDEO SLIDER

VIDEO SLIDER
CAROUSEL SCROLLING VIDEO SLIDER
Αυτό είναι ένα carousel scrolling video slider είναι πολύ απλό και ελαφρύ δεν χρειάζεται να φορτώσει jquery και είναι προσαρμόσιμο σε πλάτος, ύψος, αριθμό videos και ταχύτητα κύλισης. Στο πρώτο width:960px; height:200px; αλλάζετε το πλατος και το ύψος του slider στο τρίτο width:200px; height:200px; αλλάζετε το πλάτος και το ύψος των video που βρίσκονται εντός του slider. Αντικαταστήστε τα δικά μου γαλάζια links των video με τα δικά σας. Δείτε το ακριβώς κάτω από εδώ .



<style>
@-webkit-keyframes slider {
0% {left: 0%;}
20% {left: -20%;}
40% {left: -40%;}
60% {left: -60%;}
80% {left: -80%;}
100% {left: -100%;}}
@keyframes slider {
0% {left: 0%;}
20% {left: -20%;}
40% {left: -40%;}
60% {left: -60%;}
80% {left: -80%;}
100% {left: -100%;}}
.carousel-container {width:960px; height:200px; overflow:hidden; background:#173377;}
.carousel-container .slider-carousel {position: relative;width:9999px; height:125px; -webkit-animation: 3s slider infinite; animation: 30s slider infinite;}
.carousel-container .slider-carousel span {width:240px; height:200px; float:left; background: #105105; color:#FFFFFF; font:14px arial;}
</style>

<div class="carousel-container">
<div class="slider-carousel">
<span><iframe width="240" height="180" src="https://www.youtube.com/embed/1stIQK3DS6o" frameborder="0" allowfullscreen></iframe><a>ΠΩΣ ΦΤΙΑΧΝΩ BLOG</span></a>
<span><iframe width="240" height="180" src="https://www.youtube.com/embed/7EgYR6rXCe8" frameborder="0" allowfullscreen></iframe><a>ΡΥΘΜΙΣΕΙΣ ΠΡΟΤΥΠΟΥ</span></a>
<span><iframe width="240" height="180" src="https://www.youtube.com/embed/Pd5dNEnqNWM" frameborder="0" allowfullscreen></iframe><a>ΕΝΣΩΜΑΤΩΣΗ ECXEL</span></a>
<span><iframe width="240" height="180" src="https://www.youtube.com/embed/CbhDxlXmgTs" frameborder="0" allowfullscreen></iframe><a>ΠΩΣ ΒΑΖΩ READ MORE</span></a>
<span><iframe width="240" height="180" src="https://www.youtube.com/embed/bgTC_Ho9d1M" frameborder="0" allowfullscreen></iframe><a>ΚΥΛΙΟΜΕΝΑ LINKS</span></a>
<span><iframe width="240" height="180" src="https://www.youtube.com/embed/h_Hf_d-srvQ" frameborder="0" allowfullscreen></iframe><a>ΜΟΡΦΟΠΟΙΗΣΗ ΚΕΙΜΕΝΟΥ</span></a>
</div></div>

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

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

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

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