Hello developers, today in this blog you'll learn to create a Responsive Image Slider using HTML, CSS & JavaScript.
Image
slider or slideshow commonly shows one large image at a time with a little
scrap of text, at the bottom of the image.
In this
blog Responsive Image Slider, there are three images but only a single image
will appear at the front. There are buttons on the left and right side of the
image which works manually by clicking on either side of the buttons. These
buttons slide these images forward and backward one by one on a button click.
By clicking on the button you can forward or backward the images as you want.
There are three rounded buttons at the bottom of the image, which allows you to click on whichever image you picked or you want. This forward, backward, and onclick function is performed by using JavaScript. The CSS media query property has been used to make the web page responsive.
The
source code of this Responsive Image Slider is given below, if you want the
source code of this program, you can copy it. You can use this Responsive Image
Slider with your creativity and can take this project to the next level.
Responsive
Image Slider [Source Code]
To make
this website, you would like to make three files: an HTML file, a CSS file
& a JavaScript file. First, create an HTML file with the name of index.html and
remember, you've to make a file with a .html extension.
CSS
provides style to an HTML page. To form the page attractive create a CSS file
with the name style.css and remember that you've got to make a file with a .css
extension.
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0;
background: #f2709c;
background: -webkit-linear-gradient(to right, #ff9472, #f2709c);
background: linear-gradient(to right, #ff9472, #f2709c);
}
.mySlides {display: none}
img {vertical-align: middle;
height:500px;
border-radius: 10px;
}
.slideshow-container {
max-width: 1000px;
position: relative;
margin:20px auto;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.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:10px;
user-select: none;
}
.next {
right: 0;
border-radius: 10px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #fff;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #202124;
}
.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}
}
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
.credit{
text-align: center;
color: #202124;
padding-top:15px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js, and remember that you've got to make a file with a .js extension.
We hope you would like this Responsive Image Slider using HTML, CSS & JavaScript.
Thank you for reading our blog. If you face any problem in creating this Responsive Image Slider using HTML, CSS & JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team