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:

click on the image for a larger 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.

Comments

Displaying 14 of 14 comments ( View all | Add Comment )

KOЯN-ADDICTION (Mother Priest Of Spacehey)	1739061550 using!! Report Comment hi vro by Sickmuse072; 1741069271; Report hi bro by KOЯN-ADDICTION (Mother Priest Of Spacehey); 1741070764; Report whats up vro by KOЯN-ADDICTION (Mother Priest Of Spacehey); 1741070786; Report nothing much I'm juet geting ready for school wbu by Sickmuse072; 1741095160; Report
𝖑𝖚𝖓𝖆	1738611684 using Report Comment
NOVaL	1738340512 Using x! Report Comment
dotfuls	1737620327 💜🕸️ Report Comment
0ffpuddingir1	1736635965 usinggg Report Comment
Asher	1736182418 using :) Report Comment
ETAZO1	1734370347 using. super cool! Report Comment
Skull	1733433253 using!! Report Comment
mcki_mckphink	1728252400 usiignlngaknj Report Comment
xX_SkeLetoN_Xx [CEO of mpreg🫃️]	1719725888 useing!! Report Comment
michelle	1715475088 usingg tysm Report Comment
mel	1647808972 doesn't work for me :( Report Comment
Mr.Timer	1632544039 doesnt work for me :/ Report Comment
Julia5D	1613509548 Thanks! Report Comment