Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Create an Image Slider using HTML, CSS, and JavaScript?
In this article, we are going to create a slider carousel using JavaScript. Along with using JS we will be also using HTML and CSS for representation and defining the basic layout.
A carousel is basically a collection of images represented as a slideshow that is used for displaying the images, text, or both in a cyclic manner.
A slider Carousel is a special type of carousel that is specifically used for displaying the slider on a website's main page. This slideshow runs in a landscape mode. We can use the eventListener() provided by the JavaScript functions to record and display different images on the slider.
Steps for Creating Image Slider
-
The first step would be creating a new HTML page and defining the div in the HTML.
-
The div will be defined under the body section and will be responsible for holding the slider carousel.
-
We will be adding the left and right buttons in the carousel to let the user navigate between the multiple slides available.
-
We will be using CSS for designing the components. Commonly used CSS properties are font-size, padding, margin, etc.
-
In the last we will be creating a JavaScript function that will provide the carousel with the scroll functionality.
HTML Structure
The HTML creates a slideshow container with individual slides, navigation arrows, and dot indicators for easy navigation.
CSS Styling
The CSS handles the visual presentation and positioning. Key features include:
- Slideshow container - Centers the slider with a maximum width
- Navigation arrows - Positioned absolutely on left and right sides
- Dot indicators - Small circles that show current slide position
- Fade effect - Smooth transitions between slides
JavaScript Functionality
The JavaScript provides three main functions:
-
plusSlides(n)- Moves forward/backward by n slides -
currentSlide(n)- Jumps directly to slide n -
showSlides(n)- Displays the specified slide and updates indicators
Complete Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
background-color: rgba(0,0,0,0.5);
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a darker background */
.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;
background-color: rgba(0,0,0,0.5);
}
/* 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;
}
/* Fade animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="/images/logo.png" style="width:100%" alt="Slide 1">
<div class="text">Welcome to Tutorials Point</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="/images/sample2.jpg" style="width:100%" alt="Slide 2">
<div class="text">Start your Learning Today!</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="/images/sample3.jpg" style="width:100%" alt="Slide 3">
<div class="text">About Us</div>
</div>
<a class="prev" onclick="plusSlides(-1)">?</a>
<a class="next" onclick="plusSlides(1)">?</a>
</div>
<br>
<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>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
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";
}
</script>
</body>
</html>
How It Works
The slider works by:
- Initialization - Sets slideIndex to 1 and shows the first slide
- Navigation - Arrow clicks call plusSlides() to move forward/backward
- Direct access - Dot clicks call currentSlide() to jump to specific slides
- Display logic - showSlides() hides all slides, then shows the current one
- Indicators - Updates dot styling to show active slide
Key Features
- Responsive design - Works on different screen sizes
- Smooth transitions - CSS fade animation between slides
- Multiple navigation - Arrow buttons and dot indicators
- Loop functionality - Cycles from last to first slide seamlessly
- Accessibility - Includes alt text and keyboard-friendly elements
Conclusion
This image slider combines HTML structure, CSS styling, and JavaScript functionality to create an interactive slideshow. The code is flexible and can be easily customized with your own images and styling preferences.
9K+ Views
