โ๐๐ โ๐ฆ๐ ๐น๐ฆ๐๐ค๐ค, ๐ฅ๐๐๐๐๐ค ๐ฅ๐ ๐๐ค. ๐๐๐ ๐๐๐, ๐ค๐๐ ๐ก๐ฃ๐ ๐ง๐๐๐๐ ๐๐ ๐จ๐๐ฅ๐ ๐ฅ๐๐ ๐๐ ๐๐ ๐ฅ๐ ๐๐๐ ๐ก๐๐๐ฅ๐ฆ๐ฃ๐๐ค ๐ฅ๐ ๐ ๐ค๐๐๐๐๐ค๐๐ ๐จ ๐ ๐ ๐ช๐ ๐ฆ๐ฃ ๐ก๐ฃ๐ ๐๐๐๐. ๐๐ฆ๐ค๐ฅ ๐ฝ๐๐! ๐๐ ๐ฆ'๐ฃ๐ ๐๐ ๐๐๐ ๐ฅ๐ ๐๐๐๐ ๐ ๐จ๐๐๐ค๐๐ฅ๐ (๐ ๐ฃ ๐๐ก๐ก ๐๐๐๐ ๐ ๐ฆ๐ค๐๐) ๐ฅ๐ ๐ฆ๐ก๐๐ ๐๐ ๐ก๐๐๐ฅ๐ฆ๐ฃ๐๐ค ๐ ๐ ๐ฅ๐ ๐๐๐ ๐ฅ๐๐ ๐โ๐ ๐๐๐ฅ๐ ๐ฅ๐๐ ๐๐ ๐๐.ย ๐๐๐ ๐๐ก๐ก ๐ ๐ฆ๐ค๐๐ ๐๐ค ๐๐ ๐๐ก๐๐๐ฅ๐๐๐ช ๐๐ฃ๐๐ ๐๐๐ ๐๐ค ๐๐๐๐๐๐ ๐๐๐๐ง๐๐ฃ๐ค๐! ๐๐ฆ๐ค๐ฅ ๐๐ ๐๐๐, ๐๐ฃ๐๐๐ฅ๐ ๐ ๐จ๐๐๐ค๐๐ฅ๐ ๐๐๐ ๐๐๐ ๐ช๐ ๐ฆ๐ฃ ๐ก๐๐๐ฅ๐ฆ๐ฃ๐๐ค, ๐๐๐๐๐ ๐๐๐๐๐ค๐๐๐ ๐๐๐ ๐๐ฅ ๐ค๐๐ ๐ฆ๐๐ ๐๐๐๐๐ฃ๐๐ฅ๐ ๐ช๐ ๐ฆ๐ฃ ๐ ๐จ๐ ๐ก๐๐ฃ๐ค๐ ๐๐๐ ๐๐๐๐, ๐ก๐ฆ๐ฅ ๐ฅ๐๐ ๐๐๐๐ ๐๐๐ฅ๐ ๐ช๐ ๐ฆ๐ฃ ๐๐ ๐๐ก๐ฆ๐ฅ๐๐ฃ ๐๐ ๐ ๐๐๐๐๐๐ฃ๐๐๐ฅ ๐ฅ๐๐ ๐๐๐ ๐๐ ๐ก๐ช ๐๐๐ ๐ก๐๐ค๐ฅ๐ ๐ฅ๐๐ !๐๐๐๐๐ ๐ธ๐๐๐ฃ๐๐ค๐ค! ๐๐๐ฅ๐ ๐ฅ๐๐ ๐๐ ๐๐, ๐๐๐ ๐ช๐ ๐ฆ'๐ฃ๐ ๐ค๐๐ฅ! โ๐ ๐จ ๐๐๐๐๐ ๐ค๐๐ ๐ช'๐๐๐ ๐๐๐๐ ๐๐ค๐ค๐๐ค! (ใฃโโกโ)ใฃ โฅ You can also test your code out here! โฅ ใ๏ปฟ๏ผฌ๏ฝ๏ฝ๏ฝ
ใ๏ฝ๏ฝ๏ฝใ๏ฝ๏ฝ
๏ฝ๏ฝ๏ฝ
ใ๏ฝ๏ฝ๏ฝ๏ฝ๏ฝ
๏ฝ๏ฝ๏ฝ๏ผใ
<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>
๐ฎ๐๐พ๐น๐๐๐ฝ๐๐๐๐๐! ๐๐น๐น ๐๐๐๐ ๐ ๐พ๐ธ๐๐๐๐๐ ๐๐ ๐๐๐๐ ๐ ๐๐๐ป๐พ๐๐! <๐ฅ๐ฅ
10 Kudos
Comments
Displaying 6 of 6 comments ( View all | Add Comment )
VANDINA
Can you tell me how to add background music to mine? Like you're just out here doing it all!
Report Comment
i got you hunny ! message me !
by แ โแ โก succubuslut โกแ โ แ ; ; Report
Lovely Love
i could really use some help please
Report Comment
hmu in my messages i got u hunny!
by แ โแ โก succubuslut โกแ โ แ ; ; Report
TapangaSoPretty
can u do mine??? lol
Report Comment
Message me!
by แ โแ โก succubuslut โกแ โ แ ; ; Report
Pretty Tink Tink
Hey hunn i have tried everything it will not work fo me ugggggh .....i want a slideshow lol im so desperate ill give u my passwrd
Report Comment
Message mee! we gon figured dis out!
by แ โแ โก succubuslut โกแ โ แ ; ; Report
๐๐พ๐ถ๐๐๐ถ ๐
Thanks love! ;*
Report Comment
No problem hunny! xox
by แ โแ โก succubuslut โกแ โ แ ; ; Report
AreeMonroe
Do we copy and paste the whole thing? or we take out the part where were you explain instructions ?
Report Comment
Copy and paste everything but the instrustions
by แ โแ โก succubuslut โกแ โ แ ; ; Report
instructions**
by แ โแ โก succubuslut โกแ โ แ ; ; Report