Table of Contents
Image Slider Using HTMl CSS And Javascript
Hello developers friends, all of you are welcome to my new post. Today we have created a wonderful image slider which is very beautiful and fun. To create this image slider, we have used HTML CSS and JavaScript. We have not used any other framework. not done
Friends, in this image slider, we have also added Next button and Previous button, through which the user can next and previous image, by doing this the user does not face any problem.
In this image slider, we have included images which you can edit as per your wish. You will have to add the name of the image file in the tag of the image shown below, then your image will be changed.
<li class=’item’ style=”background-image: url(‘https://assets.entrepreneur.com/content/3×2/2000/1709702510-Untitleddesign4.png‘)”>
Responsive Image Slider Step:-
Friends, if you also want to use this image slider, then it is important for you to keep some things in mind like you should have some knowledge about HTML, CSS, JavaScript, if you do not have the knowledge then you should have some knowledge about the code. There may be difficulty in editing and using and also these three files should be linked to each other, if you do not know then your code will not work properly.
Follow these rules to use the code 👇👇
- First of all, you need to create a folder in your computer or laptop, then you have to create a folder and name it anything as per your choice.
- Now you have to open the created folder in your vs code. If you do not use vs code, then you also have to open this folder in whatever code editor you use for coding.
- Now you have to create three different files in this folder: index.html. To create the structure of the image slider in this file, the code we have written will have to be added to it, then you will have to add style.css in which the image slider will be placed. To make it look great, code will be added, then the last file, script.js, in which the code that will be used to make the image slider work perfectly, will be added to it, which is very important.
Now you will get the HTML, CSS and JavaScript code below, which you have to add in whatever file it is, then your image slider will be ready.
Image Slider HTML Code
Image slider Shradha my Love
-
You are Magical
I was thinking about you today and couldn't help but smile. Your presence has a way of making everything better.
-
"Your Eyes..."
"Are you a magician? Because whenever I look at you, everyone else disappears. ✨"
-
"You are Always in my mind"
"You're like a fine wine – you get better with time. 😍
-
"When i Lost I find You.."
"Do you have a map? Because I just keep getting lost in your eyes every time I see you. 🌟"
-
"You are cute .."
"If you were a cat, you'd purr-fectly steal my heart.
Image Slider CSS Code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: grid;
place-items: center;
overflow: hidden;
box-shadow: "0px 4px 4px 0px #00000040,inset 0 0 0 1000px rgba(0,0,0,.5)"
}
main {
position: relative;
width: 100%;
height: 100%;
box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}
.item {
width: 200px;
height: 300px;
list-style-type: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
background-position: center;
background-size: cover;
border-radius: 20px;
box-shadow: 0 20px 30px rgba(255,255,255,0.3) inset;
transition: transform 0.1s, left 0.75s, top 0.75s, width 0.75s, height 0.75s;
&:nth-child(1), &:nth-child(2) {
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: none;
border-radius: 0;
box-shadow: none;
opacity: 1;
}
&:nth-child(3) { left: 50%; }
&:nth-child(4) { left: calc(50% + 220px); }
&:nth-child(5) { left: calc(50% + 440px); }
&:nth-child(6) { left: calc(50% + 660px); opacity: 0; }
}
.content {
width: min(30vw,400px);
position: absolute;
top: 50%;
left: 3rem;
transform: translateY(-50%);
font: 400 0.85rem helvetica,sans-serif;
color: white;
background: rgba(0, 0, 0, 0.2);
border-radius: 5px;
padding: 10px;
text-shadow: 0 3px 8px rgba(0,0,0,0.5);
opacity: 0;
display: none;
& .title {
font-family: 'arial-black';
text-transform: uppercase;
}
& .description {
line-height: 1.7;
margin: 1rem 0 1.5rem;
font-size: 0.8rem;
}
& button {
width: fit-content;
background-color: rgba(0,0,0,0.1);
color: white;
border: 2px solid white;
border-radius: 0.25rem;
padding: 0.75rem;
cursor: pointer;
}
}
.item:nth-of-type(2) .content {
display: block;
animation: show 0.75s ease-in-out 0.3s forwards;
}
@keyframes show {
0% {
filter: blur(5px);
transform: translateY(calc(-50% + 75px));
}
100% {
opacity: 1;
filter: blur(0);
}
}
.nav {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
z-index: 5;
user-select: none;
& .btn {
background-color: rgba(255,255,255,0.5);
color: rgba(0,0,0,0.7);
border: 2px solid rgba(0,0,0,0.6);
margin: 0 0.25rem;
padding: 0.75rem;
border-radius: 50%;
cursor: pointer;
&:hover {
background-color: rgba(255,255,255,0.3);
}
}
}
@media (width > 650px) and (width < 900px) {
.content {
& .title { font-size: 1rem; }
& .description { font-size: 0.7rem; }
& button { font-size: 0.7rem; }
}
.item {
width: 160px;
height: 270px;
&:nth-child(3) { left: 50%; }
&:nth-child(4) { left: calc(50% + 170px); }
&:nth-child(5) { left: calc(50% + 340px); }
&:nth-child(6) { left: calc(50% + 510px); opacity: 0; }
}
}
@media (width < 650px) {
.content {
& .title { font-size: 0.9rem; }
& .description { font-size: 0.65rem; }
& button { font-size: 0.7rem; }
}
.item {
width: 130px;
height: 220px;
&:nth-child(3) { left: 50%; }
&:nth-child(4) { left: calc(50% + 140px); }
&:nth-child(5) { left: calc(50% + 280px); }
&:nth-child(6) { left: calc(50% + 420px); opacity: 0; }
}
}
Image Slider Javascript Code
const slider = document.querySelector('.slider');
function activate(e) {
const items = document.querySelectorAll('.item');
e.target.matches('.next') && slider.append(items[0]);
e.target.matches('.prev') && slider.append(items[items.ngth -1]);
}
document.addEventListener('click',activate,false);
Output:-