Create A Slideshow in HTML , CSS and JS

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.

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

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

To get in detail and demo Read More: Create A Slideshow In HTML And CSS3