Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 Review Carousel
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.
Example
In the below example, we will be creating a simple slider carousel’s basic HTML layout that will be used for displaying the slides in a slider format on the website.
CSS (<style>) − In the style tag we have added the CSS that will be used for enhancing the User Experience. This section is very important for producing the slider effect. The left and right arrows are used for moving the slider to the left and right. All the slides have the image and the caption defined. These captions are placed on top of the image.
JS(<script>): The JS is used for recording the events when left or right arrows are clicked. On clicking the buttons, the JS will navigate toward the next image.
#Filename: index.html
<!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;
}
/* 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 seethrough */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: black;
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;
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://www.tutorialspoint.com/images/logo.png" style="width:100%">
<div class="text">Welcome to Tutorials Point</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://www.tutorialspoint.com/assets/questions/media/64678/5.png" style="width:100%;">
<div class="text">Start your Learning Today !</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://www.tutorialspoint.com/about/images/about.jpg" style="width:100%">
<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>Output
8K+ Views
