The javascriptkit-code is not very much customizable. Try to experiment with the code below (no jquery, pure vanilla). I have arrows instead of thumbnails. Arrows are much more flexible. As for embedding the show on a page, just use an iframe.
Code:
<!doctype html>
<html lang="en" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slideshow</title>
<style>
.slide{
opacity: 0;
z-index: 1;
position: absolute; width: calc(100% - 0px); height: 100%; left: 0px; top: 0;
-webkit-transition: opacity 3s;
-moz-transition: opacity 3s;
-o-transition: opacity 3s;
transition: opacity 3s;
box-sizing: border-box;
text-align: center;
background-repeat: no-repeat;
}
.showing{
opacity: 1;
z-index: 2;
}
html, body {overflow: hidden; background: black}
</style>
<style>
.buttons {
position: relative; display: inline-block; top: 0; cursor: pointer; line-height: 0; border: 2px solid white; border-radius: 100%; padding: 2px; background: black
}
#pause, #play, #next {margin-left: 20px}
#play {display: none}
#pause, #play, #next, #prev {transition: 2s}
</style>
<style>
html { -webkit-animation:fadein 6s; animation:fadein 6s }
@-webkit-keyframes fadein
{
0%{opacity:0; }
25%{opacity:0; }
35%{opacity:0; }
50%{opacity:1; }
75%{opacity:1; }
100%{opacity:1; }
}
@keyframes fadein
{
0%{opacity:0; }
25%{opacity:0; }
35%{opacity:0; }
50%{opacity:1; }
75%{opacity:1; }
100%{opacity:1; }
}
</style>
</head>
<body>
<div style="position: absolute; left: 0; top: 0; background: transparent; width: 100%; text-align: center; z-index: 3" >
<div id="prev" class="buttons" onclick="prevSlide(); "><img src="https://www.wierdenland.nl/img_25jaar/prev_slideshow.png" style="height: 30px; width: 30px; " alt=""></div>
<div id="pause" class="buttons" onclick="pauseSlideshow()"><img src="https://www.wierdenland.nl/img_25jaar/pause_slideshow.png" style="height: 30px; width: 30px; " alt=""></div>
<div id="play" class="buttons" onclick="playSlideshow()"><img src="https://www.wierdenland.nl/img_25jaar/play_slideshow.png" style="height: 30px; width: 28px; padding-left: 2px " alt=""></div>
<div id="next" class="buttons" onclick="nextSlide(); "><img src="https://www.wierdenland.nl/img_25jaar/next_slideshow.png" style="height: 30px; width: 30px; " alt=""></div>
</div>
<div id="slides" >
<div class="slide showing" style="background-image: url('http://www.javascriptkit.com/script/script2/fpslideshow/waterdrop.jpg'); background-size: contain; background-position: center center">
<div style="position: absolute; bottom:0px; background-color: black; color: white; display: inline-block; padding: 5px; font-family: arial; font-size: 16px; font-weight:normal; border: 1px outset #aa86a2; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; line-height: 22px; left: -2px; width: 100%; text-align: center; opacity: 0.8">Waterdrop</div>
</div>
<div class="slide" style="background-image: url('http://www.javascriptkit.com/script/script2/fpslideshow/tropical.jpg'); background-size: contain; background-position: center center">
<div style="position: absolute; bottom:0px; background-color: black; color: white; display: inline-block; padding: 5px; font-family: arial; font-size: 16px; font-weight:normal; border: 1px outset #aa86a2; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; line-height: 22px; left: -2px; width: 100%; text-align: center; opacity: 0.8">Tropical</div>
</div>
<div class="slide" style="background-image: url('http://www.javascriptkit.com/script/script2/fpslideshow/sunset.jpg'); background-size: contain; background-position: center center">
<div style="position: absolute; bottom:0px; background-color: black; ; color: white; display: inline-block; padding: 5px; font-family: arial; font-size: 16px; font-weight:normal; border: 1px outset #aa86a2; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; line-height: 22px; left: -2px; width: 100%; text-align: center; opacity: 0.8">Sunset</div>
</div>
<div class="slide" style="background-image: url('http://www.javascriptkit.com/script/script2/fpslideshow/legs.jpg'); background-size: contain; background-position: center center">
<div style="position: absolute; bottom:0px; background-color: black; ; color: white; display: inline-block; padding: 5px; font-family: arial; font-size: 16px; font-weight:normal; border: 1px outset #aa86a2; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; line-height: 22px; left: -2px; width: 100%; text-align: center; opacity: 0.8">Legs</div>
</div>
<div class="slide" style="background-image: url('http://www.javascriptkit.com/script/script2/fpslideshow/fisherman.jpg'); background-size: contain; background-position: center center">
<div style="position: absolute; bottom:0px; background-color: black; ; color: white; display: inline-block; padding: 5px; font-family: arial; font-size: 16px; font-weight:normal; border: 1px outset #aa86a2; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; line-height: 22px; left: -2px; width: 100%; text-align: center; opacity: 0.8">Fisherman</div>
</div>
<div class="slide" style="background-image: url('http://www.javascriptkit.com/script/script2/fpslideshow/church.jpg'); background-size: contain; background-position: center center">
<div style="position: absolute; bottom:0px; background-color: black; ; color: white; display: inline-block; padding: 5px; font-family: arial; font-size: 16px; font-weight:normal; border: 1px outset #aa86a2; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; line-height: 22px; left: -2px; width: 100%; text-align: center; opacity: 0.8">Church</div>
</div>
<div class="slide" style="background-image: url('http://www.javascriptkit.com/script/script2/fpslideshow/birds.jpg'); background-size: contain; background-position: center center">
<div style="position: absolute; bottom:0px; background-color: black; ; color: white; display: inline-block; padding: 5px; font-family: arial; font-size: 16px; font-weight:normal; border: 1px outset #aa86a2; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; line-height: 22px; left: -2px; width: 100%; text-align: center; opacity: 0.8">Birds</div>
</div>
</div>
<script>
var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,5000);
if(currentSlide==0){document.getElementById('prev').style.opacity=0;}
function nextSlide(){
document.getElementById('next').style.opacity=1;
document.getElementById('prev').style.opacity=1;
goToSlide(currentSlide+1);
document.getElementsByClassName('slide')[currentSlide].scrollTop=0
}
function prevSlide(){
document.getElementById('next').style.opacity=1;
document.getElementById('prev').style.opacity=1;
goToSlide(currentSlide-1);
document.getElementsByClassName('slide')[currentSlide].scrollTop=0
}
function goToSlide(n){
slides[currentSlide].className = 'slide';
currentSlide = (n+slides.length)%slides.length;
if(currentSlide==0){document.getElementById('prev').style.opacity=0};
if(currentSlide==slides.length-1){document.getElementById('next').style.opacity=0};
slides[currentSlide].className = 'slide showing';
}
function pauseSlideshow(){
clearInterval(slideInterval);
document.getElementById('pause').style.display='none';
document.getElementById('play').style.display='inline-block';
}
function playSlideshow(){
nextSlide();
slideInterval = setInterval(nextSlide,5000);
document.getElementById('pause').style.display='inline-block';
document.getElementById('play').style.display='none';
}
</script>
</body>
</html>
Junior Coders
How do I add captions and embed this slideshow on a page?
Posting Permissions
Reply With Quote
Bookmarks