Creating a Slideshow for your page

To paste a slideshow copy this code:

<style>

:root{

/* here's where you paste the image URLs and how fast you want the whole slideshow to be (add the s for seconds!) */

--image1: url(https://i.imgur.com/mk2lOGz.jpeg);

--image2: url(https://i.imgur.com/nK9ujRv.jpeg);

--image3: url(https://i.imgur.com/nYQgir6.jpeg);

--image4: url(https://i.imgur.com/78kZgFi.jpeg);

--image5: url(https://i.imgur.com/Y9WMGqo.jpeg);

--time: 15s;

}

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

0 Kudos

Comments

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