5-Image Slideshow

Tags: css, slideshow, cory, pacdude

Description:

Marquees are easy ways to make slideshows, but I'm not an easy guy, so let's get use some MATH to figure out how to make traditional fading slideshows. You can see an example on my page, underneath the Books You Should Read section. 

I've figured out the math for a 4-image, 5-image and 6-image slideshow. If this post blows up, I'll work out the math for more. I'm leaving the 5-image code here, but if you want the other codes, please check out my bulletin: CSS/HTML Snippet: Slideshows

Implementing the slideshow is easy! Copy the code, paste it wherever you'd like the slideshow to appear, and then replace the image URLs at the top of the code with the images you'd like to use, and then if you'd like, change the time to be any amount of seconds. Right now, it's set to 30 seconds. Whenever you change the time, make sure you put an 's' at the end to tell the CSS you want it to be in seconds. I don't know if 'm' works for minutes but I wouldn't chance it.

Preview:

Code:

<!-- (c) Layout created by Cory (https://layouts.spacehey.com/layout?id=264) --> <!-- This is a 5-image slideshow created by Cory Anotado. Paste this wherever you want your slideshow to go, from this line to the END line. --> <style> :root{ /* here's where you put your image URLs and how long you want the entire slideshow to be (make sure you add the s for seconds!) */ --image1: url(https://i.imgur.com/T1dbzep.jpg); --image2: url(https://i.imgur.com/O8yQN2g.jpg); --image3: url(https://i.imgur.com/hwaw5Z8.jpg); --image4: url(https://i.imgur.com/oNpY32t.jpg); --image5: url(https://i.imgur.com/NUbq8T2.jpg); --time: 30s; } .pdg_slideshow{ width:100%; height:500px; position:relative; } @media only screen and (max-width: 768px) { .pdg_slideshow{ height:300px; } } .pdg_slideshow_image { background-size:contain;background-repeat:no-repeat;background-position:center; width:100%; height:100%; position:absolute;} .pdg_slideshow_image#image1 {background-image:var(--image1); animation: slide1 var(--time) ease 0s infinite normal none; } .pdg_slideshow_image#image2 {background-image:var(--image2); animation: slide2 var(--time) ease 0s infinite normal none; } .pdg_slideshow_image#image3 {background-image:var(--image3); animation: slide3 var(--time) ease 0s infinite normal none; } .pdg_slideshow_image#image4 {background-image:var(--image4); animation: slide4 var(--time) ease 0s infinite normal none; } .pdg_slideshow_image#image5 {background-image:var(--image5); animation: slide5 var(--time) ease 0s infinite normal none; } @keyframes slide1 { 0%, 20%, 100% { opacity: 0; } 1%, 19% { opacity: 1; } } @keyframes slide2 { 0%, 20%, 40%, 100% { opacity: 0; } 21%, 39% { opacity: 1; } } @keyframes slide3 { 0%, 40%, 60%, 100% { opacity: 0; } 41%, 59% { opacity: 1; } } @keyframes slide4 { 0%, 60%, 80%, 100% { opacity: 0; } 61%, 79% { opacity: 1; } } @keyframes slide5 { 0%, 80%, 100% { opacity: 0; } 81%, 99% { opacity: 1; } } </style> <div class="pdg_slideshow"> <div class="pdg_slideshow_image" id="image1"></div> <div class="pdg_slideshow_image" id="image2"></div> <div class="pdg_slideshow_image" id="image3"></div> <div class="pdg_slideshow_image" id="image4"></div> <div class="pdg_slideshow_image" id="image5"></div> </div> <!-- END LINE - Thank you for using the PDG SpaceHey Slideshow! -->

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.