CSS image-slider

Video Tutorial

Demo

In this example We are animating the elements opacity to have the different slides fade in and out.

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 with CSS transform

In example we are animating the CSS transform: translate() property instead to make each image slide in/out rather than fade in/out.

Simply replace the CSS keyframe animation with this:

@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 Example(s)

newburyhistory.co.uk has put my slider into good use.

If you are using my slider in an interesting way as well, you might earn yourself a link here too. Please contact me with your link