Design image slider by using JavaScript
This article will teach you how to create a slider by using HTML, CSS, and JavaScript language. Here I don’t use any framework or plugins.
A slide using a landing page for any place on a website. When anyone wants to set up a slider, at this point, a developer finds an existing jQuery plugin on their website.
Sometimes plugin code that is fixed needs more time. At this point, you will create a simple slider just using HTML and JavaScript programming language. It gives you a simple look that can be created easily without any problem.
How to create a image slider using HTML, CSS, and JavaScript
Start creating a slider you need to know, including image size, which means image height and weight must all be the same size; otherwise, you face a few problems when setting up this slider on your website navigation bar.
I used 4 images and two slider change buttons to create an exciting slider. Also need to create an HTML file and CSS file on your desktop or current using devices, then add Creating CSS file on your HTML file. Let’s start to create a slider image on your website using HTML, CSS, and JavaScript language-
.
#Step 1: Create a HTML structure
First, include HTML file source code that I add to create a simple website slider structure. Here I use 4 png format images all the same size. I want to make 4 image sliders, so I must include these four images. First, you declare a class under your HTML file and link up the image, and the same class includes 4 images.
<!– Slideshow container –>
<div class=”slideshow-container”>
<!– Full-width images with number and caption text –>
<div class=”mySlides fade”>
<div class=”numbertext”>1 / 3</div>
<img src=”image.jpg/image1.png” style=”width:100%”>
<div class=”text”>Caption Text</div>
</div>
<div class=”mySlides fade”>
<div class=”numbertext”>2 / 3</div>
<img src=”image.jpg/image2.png” style=”width:100%”>
<div class=”text”>Caption Two</div>
</div>
<div class=”mySlides fade”>
<div class=”numbertext”>3 / 3</div>
<img src=”image.jpg/image3.png” style=”width:100%”>
<div class=”text”>Caption Three</div>
</div>
<!– Next and previous buttons –>
<a class=”prev” onclick=”plusSlides(-1)”>❮</a>
<a class=”next” onclick=”plusSlides(1)”>❯</a>
</div>
<br>
<!– The dots/circles –>
<div style=”text-align:center”>
<span class=”dot” onclick=”currentSlide(1)”></span>
<span class=”dot” onclick=”currentSlide(2)”></span>
<span class=”dot” onclick=”currentSlide(3)”></span>
</div>
Output this html file-
.
#Step 2: Including these CSS to create a unique slider on your device
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the “next button” to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* 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) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* 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}
}
Using JavaScript language you create clickable images or automatic slides showing images one your website. Here I show the two methods how to create a dynamic button and how to set up an automatic image on your simple slider.
First of all I create a dynamic button that must be clickable and include showing images.
.
#Step 3: Create dynamic button using JavaScript
Type your before set up js file under these code to create dynamic button-
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName(“mySlides”);
var dots = document.getElementsByClassName(“dot”);
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = “none”;
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(” active”, “”);
}
slides[slideIndex-1].style.display = “block”;
dots[slideIndex-1].className += ” active”;
}
#Step 4 : Automatic slider set up using JavaScript language
Use to want display automatic slider, just follow these code-
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName(“mySlides”);
for (i = 0; i < slides.length; i++) {
slides[i].style.display = “none”;
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = “block”;
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
If you read this article attentively, hopefully, now you are able to create a slider image without knowledge of jQuery or any other language. Have any questions related to the topic just drop a comment on the box below.
