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 20 of 34 comments ( View all | Add Comment )

Mauw	1790852003 using Report Comment
Star_Dragon	1788821966 hey i wanted to put more than one of these in my interest table but when i add a second slide show the first one turns into the second too and so i get 2 off the same slide shows. how can i fix that Report Comment
♯Ngat	1782807529 usingg Report Comment
كارمن\|𝒞armen	1777273245 using Report Comment
Ly4aAa_JkL!!!	1774819864 USANDOOOG!!!! Report Comment
[ ♯ 𝔸𝕞𝕪 ʚɞ 🍕⭐⋆.˚]	1773417633 using!! Report Comment
naki	1773263152 using !!! thank you! Report Comment
Molly Darkstar	1772326814 Surprisingly difficult to find slideshows on here. One would think they'd be more common, lol. Anyway, thanks. I'll install it when I'm on better internet. Report Comment
🍋‍🟩Fruitcake/Dr Pepper/TR45HSK8trXD/Jongler Mike	1769297020 Using!!!!!!!!!!!!!!!!!!!!!! Report Comment
𝗦𝘁𝘂𝗻𝗼𝗿𝗶🎭	1767844863 Using! Report Comment
☆☆HARLZZ☆☆	1759718927 usinggg!! XD Report Comment
Viktor	1758522315 Using Report Comment
SkinnyPete	1755186246 Dont work for me :( Just appear an empty space Report Comment
♤paranormality♤	1752020593 using! Report Comment
punkprincess.mp3	1751892425 using! Report Comment
Papa Reg	1751599138 using!! Report Comment
IMCOOLERCUZIMBLUE	1748060427 using Report Comment
☆ pam/milo ☆	1746198046 using ! Report Comment
Maggot	1745692829 using! Report Comment
sevgilikedi	1744673314 using :3 Report Comment