CSS billed-slideshow

Video Tutorial

Demo

I dette eksempel animerer vi elementernes opacity for at få de forskellige slides til at "fade" ind og ud

HTML

<div class="slideShow">
    <img class="placeHolder" src="slideshow/slide1.jpg" alt="my slideshow">
    <div class="layer1"></div>
    <div class="layer2"></div>
    <div class="layer3"></div>
    <div class="slideOverlay"><p>Photos by Søren Ditlevsen</p></div>
</div>

CSS

@keyframes layer2Anim {
    0%{opacity:0;}
    17%{opacity:0;}
    33%{opacity:1;}
    50%{opacity:1;}
    67%{opacity:0;}
    100%{opacity:0;}
}
@keyframes layer3Anim {
    0%{opacity:0;}
    50%{opacity:0;}
    67%{opacity:1;}
    83%{opacity:1;}
    100%{opacity:0;}
}
.slideShow {
    position: relative;
    overflow-x: hidden;
}
.placeHolder {
    width: 100%;
    visibility: hidden;
}
.layer1, .layer2, .layer3 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: cover;
    background-repeat: no-repeat;
}
.layer1 {
    background-image: url(slideshow/slide1.jpg);
}
.layer2 {
    background-image: url(slideshow/slide2.jpg);
    animation: layer2Anim 10s infinite;
}
.layer3 {
    background-image: url(slideshow/slide3.jpg);
    animation: layer3Anim 10s infinite;
}
.slideOverlay {
    background-image: url(slideshow/overlay.png);
    background-attachment: fixed;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.slideOverlay p {
    position: relative;
    font-size: 6vw;
    color: #fff;
    text-shadow: 3px 3px 6px #000;
    text-align: center;
    top: 30%;
}

Demo med CSS transform

I dette eksempel animerer vi i stedet transform: translate() CSS propertyen, for at få hvert enkelt billede til at "glide" ind.

Udskift blot CSS keyframe animationen med følgende

@keyframes layer2Anim {
    0%{transform: translate(-100%);}
    17%{transform: translate(-100%);}
    33%{transform: translate(0);}
    50%{transform: translate(0);}
    67%{transform: translate(-100%);}
    100%{transform: translate(-100%);}
}
@keyframes layer3Anim {
    0%{transform: translate(100%);}
    50%{transform: translate(100%);}
    67%{transform: translate(0);}
    83%{transform: translate(0);}
    100%{transform: translate(100%);}
}

Live Eksempeler

newburyhistory.co.uk har brugt min slider

Hvis du også bruger min slider på en interesant måde, kan du måske også få et link her. Kontakt mig med dit link.