How to create a slideshow in HTML and CSS3 and javascript. So, We’ll not use any external source or script for our stunning automatic slider.
As we know a web slider/slideshow is a flow of images or text that consists of displaying one element of the flow in a certain time interval. In real-time conditions, there may be a need to put an image slideshow on web applications, web pages, or anywhere else. Within seconds, a developer considers using an existing jQuery plugin or something else or slider scripts.
While using such kinds of scripts, sometimes there is a chance of code conflicts between the script libraries and the existing libraries used in the web application or pages, and this takes time to get fixed. If you will use any plugin to create a slideshow then keep in mind it can be slow down your web page speed and many other effects. So, we can’t recommend using any external plugin.
Slideshow in HTML and CSS3
If the slider need is simple and short, you can build your own slideshow by using HTML, CSS, and JavaScript. It is one of the best ways to create a slideshow. This will get less time to perform and give no errors and time-consuming..
So, Let’s start making it.
First of all, you need to create a folder named “images” or anything you want where you can add your slideshow images. in the project path and put all the images required for the slider. Make sure that all the images are in the same size (width*height). Otherwise, the slider will misbehave while navigating between slides.
Add below HTML code into your web page where you want to place a slideshow.
<div class="soft-slideshow"> <div class="softSlides out"> <div class="numbers">1 / 3</div> <img src="https://softcodeon.com/wp-content/uploads/revslider/home-3/slide-sh-8n.jpg" style="width:100%"> <div class="text">Your text here</div> </div> <div class="softSlides out"> <div class="numbers">2 / 3</div> <img src="https://softcodeon.com/wp-content/uploads/revslider/home-3/slide-sh-7n.jpg" style="width:100%"> <div class="text">Your text here</div> </div> <div class="softSlides out"> <div class="numbers">3 / 3</div> <img src="https://softcodeon.com/wp-content/uploads/revslider/home-3/slide-sh-9n.jpg" style="width:100%"> <div class="text">Your text here</div> </div></div><br> <div style="text-align:center"> <span class="bullets"></span> <span class="bullets"></span> <span class="bullets"></span> </div>
Copy below CSS code and place it below the HTML code.
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.softSlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.soft-slideshow {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbers {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The bulletss/bullets/indicators */
.bullets {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.out {
-webkit-animation-name: out;
-webkit-animation-duration: 1.5s;
animation-name: out;
animation-duration: 1.5s;
}
@-webkit-keyframes out {
from {opacity: .4}
to {opacity: 1}
}
@keyframes out {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
</style>Copy Javascript code and place after the CSS code.
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("softSlides");
var bulletss = document.getElementsByClassName("bullets");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < bulletss.length; i++) {
bulletss[i].className = bulletss[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
bulletss[slideIndex-1].className += " active";
setTimeout(showSlides, 5000); // Change image every 5 seconds
}
</script>Now is a time to check your slides it should be working. you can change images and time to change the image in the slideshow.