Report Blog Entry
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.
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.
Four-Image Slideshow
<!-- This is a 4-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); --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; }
@keyframes slide1 { 0%, 25%, 100% { opacity: 0; } 1%, 24% { opacity: 1; } } @keyframes slide2 { 0%, 25%, 50%, 100% { opacity: 0; } 26%, 49% { opacity: 1; } } @keyframes slide3 { 0%, 50%, 75%, 100% { opacity: 0; } 51%, 74% { opacity: 1; } } @keyframes slide4 { 0%, 75%, 100% { opacity: 0; } 76%, 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><!-- END LINE - Thank you for using the PDG SpaceHey Slideshow! -->Five Image Slideshow
<!-- 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! -->Six-Image Slideshow
<!-- This is a 6-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); --image6: url(https://i.imgur.com/JH0Z40o.jpg); --time: 30s; } .pdg_slideshow{ width:100%; height:500px; position:relative; } .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; } .pdg_slideshow_image#image6 {background-image:var(--image6); animation: slide6 var(--time) ease 0s infinite normal none; }
@keyframes slide1 { 0%, 16%, 100% { opacity: 0; } 1%, 15% { opacity: 1; } } @keyframes slide2 { 0%, 16%, 33%, 100% { opacity: 0; } 17%, 32% { opacity: 1; } } @keyframes slide3 { 0%, 33%, 50%, 100% { opacity: 0; } 34%, 49% { opacity: 1; } } @keyframes slide4 { 0%, 50%, 67%, 100% { opacity: 0; } 51%, 66% { opacity: 1; } } @keyframes slide5 { 0%, 67%, 83%, 100% { opacity: 0; } 68%, 82% { opacity: 1; } } @keyframes slide6 { 0%, 83%, 100% { opacity: 0; } 84%, 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 class="pdg_slideshow_image" id="image6"></div></div><!-- END LINE - Thank you for using the PDG SpaceHey Slideshow! -->If you use this code, I'd appreciate leaving me a comment or a shoutout, or even just friending me is fine too! I hope you enjoy!
Comments
Displaying 15 of 15 comments ( View all | Add Comment )
Squeezynutz
It's great!! Thank you :D
illacme
tysm!!
lili •⩊•
this was really easy to navigate (however i do have small css and html expierence)
thanku so fkin mucb!!! <33
mummified_corpse
thank you so much this is so helpful!!!
˚♡˚₊‧⁺˖ｆｉｓｈｒｅｃｉｐｅ ♡˚₊‧⁺˖
Yayayay TYSM!!! So cool! :D
SUBZEROGAMER
the best, it work thanks i add you like friend
Veroniikuh_♡
I'm having trouble using the 4 image code could someone explain what I'm doing wrong plz ty
Jani☆Noir
it works!!! thank you so much!!!!!
✿blush puppy
you are the shit, cory, thank you for this
thank you!
Becki Bullets
Thankyou!:)
I must be doing something wrong it's not showing up
by Becki Bullets; ; Report
Michele Bentley
Thank you!!🖤
Courieʕ´• ᴥ •`ʔ
Ohmgod I was looking for this thank you sooo much ^ O^)/
Old Hag
Thank you! :)
♡ ฿Ʉ₦₦Ɏ ♡
Thank you Cory, I am learning so much from your posts.
You're the best!!
I’m glad I could help! I’m trying to come up with nice, easy to drop in codes
by Cory
;
;
Report
You are doing great so far, very easy to follow.
by ♡ ฿Ʉ₦₦Ɏ ♡; ; Report