published 1636745753
updated 1639372710

Category: Art and Photography

How to add photo slideshow!

So what you have to do is go to www.Imgur.com

Make an account.

Click on your username in the top right corner.

Click on images.

Click add images. {Just 4 images}

After you add them click on the first picture you want to add.

Copy the "DIRECT LINK".

Now go to your Spacehey page to edit you About Me box.

This is the code you paste.

You will now copy and paste whatever your "DIRECT LINK" is in between the parentheses that is beside --image1: url.

Hope this helps you guys!

<style>

	:root{

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

5 Kudos

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

Robyn Leigh

1637174267

So this just bunched my photos together. And didn't sideshow them

I’m not sure why it did that.

Me either. Ima leave it tho ty beautiful

I’m sorry about that. Maybe try a different layout! Keep trying! You’re welcome 💕

I tried 20 layouts at 2 qm this morning. I'm just gunna place photos in different blocks.