Adding a 4 Picture Slideshow to Your Page (Newbies Edition)

I know a lot of people have been wondering how to get a slideshow on their profile page, because I've gotten a ton of questions. So here it is:

Copy and paste the code below wherever you would like your slideshow to be shown.

Keep in mind you MUST have your URL's for your images on standby to insert into this code. I personally used Imgur to get my links and just went in and added the i. and the .jpg at the beginning and end of the link. This is for a 30 second slideshow and is ONLY for FOUR images guys! If you have anymore questions about this in particular, feel free to comment and I will answer as best as I can! (Because I do not work in IT stink! LOL)

<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! -->