Since you haven't described which type of slideshow you need, I have created slideshow which can either run automatically or can be controlled by the user. After user click or site load, it start automatic slide show in 10s. Automatic slideshow change slides in every 3s. Check out this snippet:
var slideIndex = 0;
var timer1, timer;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
function showSlides() {//called by automatic slideshow
clearTimeout(timer1);//clear previously set timer
//clear styles
for (var i = 0; i < slides.length; i++)
slides[i].style.display = "none";
for (var i = 0; i < dots.length; i++)
dots[i].className = dots[i].className.replace(" active", "");
//reset slideIndex
if (++slideIndex == slides.length)
slideIndex = 0;
//reset styles
slides[slideIndex].style.display = "block";
dots[slideIndex].className += " active";
//reset timer
timer1 = setTimeout(showSlides, 3000);
}
function showSlide(n) {//called when user manually choose particular slide
//clear previously set timers
clearTimeout(timer1);
clearTimeout(timer);
//clear styles
for (var i = 0; i < slides.length; i++)
slides[i].style.display = "none";
for (var i = 0; i < dots.length; i++)
dots[i].className = dots[i].className.replace(" active", "");
//reset slideIndex
if (n == slides.length)
slideIndex = 0;
if (n < 0)
slideIndex = slides.length;
//reset styles
slides[slideIndex].style.display = "block";
dots[slideIndex].className += " active";
//reset timer for automatic slideshow
timer = setTimeout(showSlides, 10000);
}
/* make width, height, min/max properties includes content, padding and border */
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
width: 50vw;
height: 50vh;
position: relative;
margin: auto;
clear:both;
background-color: black;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* make images fit to slide width */
.mySlides img {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
height: 50vh; object-fit: fill;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
margin: 0;
width: auto;
padding: 16px;
color: white;
font-weight: bold;
font-size: xx-large;
transition: 0.6s;
user-select: none;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
/* Position the "next button" to the right */
.next {
right: 0;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: black;
opacity: 0.7;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 4em;
padding-bottom: : 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 1.5em;
padding: 8px 12px;
position: absolute;
top: 0;
z-index: 1;
}
/* Dots container */
.dots-container {
text-align: center;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* Small devices specific alterations */
@media only screen and (max-width: 600px) {
/* Slideshow container */
.slideshow-container {
width: 96vw;
}
.text {
font-size: 1.5em;
}
.numbertext {
font-size: 1em;
}
/* Next & previous buttons */
.prev, .next {
padding: 4px;
font-weight: bold;
font-size: large;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apple</title>
</head>
<!-- start slideshow on page load. -->
<body onload="showSlide(1);">
<div class="title">
<h1>Photoreal Scenery</h1>
</div>
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade" >
<div class="numbertext">1 / 4</div>
<img src="red.png">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img src="blue.png">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img src="green.png">
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 4</div>
<img src="j.jpg">
<div class="text">Caption Three</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="showSlide(--slideIndex);">❮</a>
<a class="next" onclick="showSlide(++slideIndex);">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div class="dots-container">
<span class="dot" onclick="showSlide(slideIndex = 0)"></span>
<span class="dot" onclick="showSlide(slideIndex = 1)"></span>
<span class="dot" onclick="showSlide(slideIndex = 2)"></span>
<span class="dot" onclick="showSlide(slideIndex = 3)"></span>
</div>
</body>
</html>
Here is the logic:
HTML
We have added <meta name="viewport" content="width=device-width, initial-scale=1.0"> to make page-width follows device width and set initial scaling to 1.0.
These are the classes
- slideshow-container - store container
- mySlides - slides
- fade - fade animation
- prev/next - previous, next buttons
- dots-container - store dots
- dot - individual dot
CSS
Important CSS additions are
- *(all) - make border, padding included in measurements of height width
- slideshow-container - set it to 50% of viewport height and width
- mySlides - hide all slides
- mySlides img - center image and set bounds
- .prev, .next - disable selection, change to pointing cursor add transition
- .numbertext - set z-index to 1
- .dot - change to pointing cursor add transition
- @-webkit-keyframes fade - setup IE specific fading rules
- @keyframes fade - setup fading rules
- @media only screen and (max-width: 600px) - tweaks for small screen devices
JavaScript
There are 2 functions:
- showSlides() - used to create automatic slideshow.
- showSlide(n) - used to view slide selected by the user.
