TIP N3: Dead Simple CSS Slideshow

[⚡JFarrow⌁]

So you want a simple full screen (perhaps even as a background) responsive slideshow.  But you hate javascript.  This is a tip for you.

What we are making is something like this live demo:

Add this to an HTML module in sites and pages:

<div class="pic-wrapper">
<figure class="pic-1"></figure>
<figure class="pic-2"></figure>
<figure class="pic-3"></figure>
<figure class="pic-4"></figure>
</div>

Add this to Design Studio and substitute my photos in RED with your own:

* {
margin: 0;
padding: 0;
}

.pic-wrapper {
position: absolute;
width: 100%;
height: 100%;
overflow:hidden;
}

figure {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity:0;
/*animation*/

animation: slideShow 24s linear infinite 0s;
-o-animation: slideShow 24s linear infinite 0s;
-moz-animation: slideShow 24s linear infinite 0s;
-webkit-animation: slideShow 24s linear infinite 0s;
}

.pic-1 {
opacity: 1;
background: url(https://storage.ning.com/topology/rest/1.0/file/get/558412?profile=original) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.pic-2 {
animation-delay: 6s;
-o-animation-delay: 6s;
-moz--animation-delay: 6s;
-webkit-animation-delay: 6s;
background: url(https://api.ning.com/files/0gGC4ZQuxjP5x5SjFdkC3hRolHrtFW8ca1JPd6W5PQN8MuTMinV0RlXOUH8fss0*xpKRYjdbH-J6jfF3liUEu*aOEEcD-DjJ/287558876_8858230ce0_o.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.pic-3 {
animation-delay: 12s;
-o-animation-delay: 12s;
-moz--animation-delay: 12s;
-webkit-animation-delay: 12s;
background: url(https://api.ning.com/files/0gGC4ZQuxjPNCyNfJkoM40OFMvObnYS46NlTDpXd*6vCwrKOLGjsNzFpiR4CKSSS-5NO7dji4qZLkjIpYhGJ272FgkzMk*3J/213517942_ab19f3d074_o.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.pic-4 {
animation-delay: 18s;
-o-animation-delay: 18s;
-moz--animation-delay: 18s;
-webkit-animation-delay: 18s;
background: url(https://api.ning.com/files/0gGC4ZQuxjMQdb1437wd44kJna7VPuRuIwtx1JNMnxuMF42MsqLFmFP*VM3FabhexTpnC6lJIOQ*yecEZM2yQbuDq*niqOig/2929804557_4b59051e82_o.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* keyframes*/

@keyframes slideShow {
0% {
opacity: 0;
transform:scale(1);
-ms-transform:scale(1);
}
5% {
opacity: 1
}
25% {
opacity: 1;
}
30% {
opacity: 0;
transform:scale(1.1);
-ms-transform:scale(1.1);
}
100% {
opacity: 0;
transform:scale(1);
-ms-transform:scale(1);
}
}

@-o-keyframes slideShow {
0% {
opacity: 0;
-o-transform:scale(1);
}
5% {
opacity: 1
}
25% {
opacity: 1;
}
30% {
opacity: 0;
-o-transform:scale(1.1);
}
100% {
opacity: 0;
-o-transform:scale(1);
}
}

@-moz-keyframes slideShow {
0% {
opacity: 0;
-moz-transform:scale(1);
}
5% {
opacity: 1
}
25% {
opacity: 1;
}
30% {
opacity: 0;
-moz-transform:scale(1.1);
}
100% {
opacity: 0;
-moz-transform:scale(1);
}
}

@-webkit-keyframes slideShow {
0% {
opacity: 0;
-webkit-transform:scale(1);
}
5% {
opacity: 1
}
25% {
opacity: 1;
}
30% {
opacity: 0;
-webkit-transform:scale(1.1);
}
100% {
opacity: 0;
-webkit-transform:scale(1);
}
}

And that's all folks!  No Javascript to weigh down your weekend.  Contact me if you need help with your Ning adventures.

[dave]

Nice work J, thanks for sharing :-)

[⚡JFarrow⌁]

Most definitely..

[Randy L. Vollett]

Nice work JF. Anyway of having the pics just fade in and out without the zoom?

[George H. Compton IV]

Hello Randy you can remove the zoom by changing this line of code. Everywhere you see it. " transform:scale(1.1); "       Change the 1.1  to a 1  that should remove the zoom.

[Randy L. Vollett]

Thanks George. Thanks for the code. I want to see how it looks without the zoom, but I am starting to like it. :)

[Randy L. Vollett]

Thanks again JF. Having a blast with this. Having dial-up your slider loads quicker than the old EZ slider. Also I don't get eyeball whiplash from the photos sliding from right to left. Lol.

[⚡JFarrow⌁]

For sure and thanks George with the assist...awesome to see you guys are finding it useful