Telegram Group Join Now
ADVERTISEMENT
Create Image Slider Using HTML,CSS and JavaScript
ADVERTISEMENT
ADVERTISEMENT
Welcome to the Codewithrandom blog. In this blog, we learn how to create an Image Slider. We use HTML, CSS, and JavaScript for this Image Slider.
I hope you enjoy our blog so let’s start with a basic Html Structure for Image Slider.
ADVERTISEMENT
HTML Code For Image Slider
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"> <div class="picContainer"> <h2>CWR Image Slider</h2> <div id="info"></div> <div id="image1" class="img"> <img src="https://netresim.com/bilesenler/dosya/dosyalar/image/galeriler/28.01.2017/bresim/Nehir-Ve-Doga-Manzarasi-HD-Wallpapers.jpg" /> </div> <div id="image2" class="img"> <img src="http://3.bp.blogspot.com/-M4taDE-t9c8/U6bQ-7Y-AfI/AAAAAAAACdM/-n9kmDQI7Lk/s1600/doga-hd-wallpaper-hd-resim.jpg" /> </div> <div id="image3" class="img"> <img src="http://1.bp.blogspot.com/-eTaD7Gdgy8c/UrA6fTbCBiI/AAAAAAAACOE/SDiPTpBGH3c/s1600/doga-balon-wallpaper-1980x1200.jpg" /> </div> <div id="image4" class="img"> <img src="https://cdn.wallpapersafari.com/7/90/uK6U2o.jpg" /> </div> <div class="left" onclick="left()"></div> <div class="right" onclick="right()"></div> <div class="dots"> <div class="dot a1"></div> <div class="dot a2"></div> <div class="dot a3"></div> <div class="dot a4"></div> </div> </div>
There is all the Html Code for the Image Slider. Now, you can see output without Css and JavaScript, then we write Css for Styling Image Slider and give Image Sliding main functionality using JavaScript in Image Slider.
ADVERTISEMENT
Restaurant Website Using HTML And CSS With Source Code
Html Code Output
ADVERTISEMENT
CSS Code For Image Slider
@import url('https://fonts.googleapis.com/css?family=Fira+Sans');
body, html {
padding: 0;
margin: 0;
background: #ececec;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
.picContainer {
position: relative;
width: 650px;
height: 400px;
border: 5px solid #262626;
background: black;
border-radius: 10px;
box-shadow: 0px 50px 100px #262626;
}
img {
width: 650px;
height: 400px;
transition: 1s;
}
.img {
width: 650px;
height: 400px;
position: absolute;
z-index: 0;
transition: 1s;
}
.right {
position: absolute;
height: 100%;
width: 60px;
z-index: 99;
cursor: pointer;
color: #fff;
transition: 1s;
right:0;
top:0;
}
.right:hover{
background: rgba(0, 0, 0, 0.25)
}
.right:before{
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f105";
font-size: 50px;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%) scale(0.75);
margin-right: 10px;
transition: .5s;
}
.right:hover:before{
transform: translateY(-50%) scale(1);
}
.left {
position: relative;
height: 100%;
width: 60px;
z-index: 99;
cursor: pointer;
color: #fff;
transition: 1s;
}
.left:hover{
background: rgba(0, 0, 0, 0.25)
}
.left:before{
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f104";
font-size: 50px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%) scale(0.75);
margin-left: 10px;
transition: .5s;
}
.left:hover:before{
transform: translateY(-50%) scale(1);
}
input{
position: absolute;
top: 0;
left: -200px;
}
h2 {
position: absolute;
color: rgba(0, 0, 0, 0.75);
top: -160px;
left: 55%;
transform: translateX(-50%);
font-family: 'Fira Sans', sans-serif;
font-size: 36px;
width: 70%;
}
.dot{
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
width: 10px;
height: 10px;
z-index: 99;
background: #333;
border-radius: 50%;
cursor: pointer;
transition: .5s;
box-shadow: 0px 0px 5px #fff;
}
.dot.a1{margin-left:-30px}
.dot.a2{margin-left:-10px}
.dot.a3{margin-left:10px}
.dot.a4{margin-left:30px}
.dot.a1:hover{background:#fff}
.dot.a2:hover{background:#fff}
.dot.a3:hover{background:#fff}
.dot.a4:hover{background:#fff}
#info {
position: absolute;
top: -65px;
left: 50%;
transform: translateX(-50%);
font-family: 'Fira Sans', sans-serif;
font-size: 25px;
color: rgba(0, 0, 0, 0.75);
}
Now we have completed our Css Section for Image Slider. Here is our updated output HTML + CSS.
ADVERTISEMENT
50+ HTML, CSS & JavaScript Projects With Source Code
ADVERTISEMENT
Output
Now we add JavaSscript Code for the changing image on Click on Slider Button and using the Below dot click and image change on Image Slider.
JavaScript Code For Image Slider
let i = 0;
let box1 = document.getElementById("image1");
let box2 = document.getElementById("image2");
let box3 = document.getElementById("image3");
let box4 = document.getElementById("image4");
let a1 = document.querySelector(".a1");
let a2 = document.querySelector(".a2");
let a3 = document.querySelector(".a3");
let a4 = document.querySelector(".a4");
let info = document.getElementById("info");
a1.onclick = function () {
box1.style.opacity = 1;
box2.style.opacity = 0;
box3.style.opacity = 0;
box4.style.opacity = 0;
info.innerHTML = "Image 1"
i = 0;
}
a2.onclick = function () {
box1.style.opacity = 0;
box2.style.opacity = 1;
box3.style.opacity = 0;
box4.style.opacity = 0;
info.innerHTML = "Image 2"
i = 1;
}
a3.onclick = function () {
box1.style.opacity = 0;
box2.style.opacity = 0;
box3.style.opacity = 1;
box4.style.opacity = 0;
info.innerHTML = "Image 3"
i = 2;
}
a4.onclick = function () {
box1.style.opacity = 0;
box2.style.opacity = 0;
box3.style.opacity = 0;
box4.style.opacity = 1;
info.innerHTML = "Image 4"
i = 3;
}
document.addEventListener("keydown", (e) => {
if (e.keyCode == 37) {
right();
}
});
document.addEventListener("keydown", (e) => {
if (e.keyCode == 39 ) {
right();
}
});
function right() {
if (i == 0) {
box1.style.opacity = 1;
box2.style.opacity = 0;
box3.style.opacity = 0;
box4.style.opacity = 0;
info.innerHTML = "Image 1"
i++
}
else if (i == 1) {
box1.style.opacity = 0;
box2.style.opacity = 1;
box3.style.opacity = 0;
box4.style.opacity = 0;
info.innerHTML = "Image 2"
i++
}
else if (i == 2) {
box1.style.opacity = 0;
box2.style.opacity = 0;
box3.style.opacity = 1;
box4.style.opacity = 0;
info.innerHTML = "Image 3"
i++
}
else if (i == 3) {
box1.style.opacity = 0;
box2.style.opacity = 0;
box3.style.opacity = 0;
box4.style.opacity = 1;
info.innerHTML = "Image 4"
i = 0;
}
}
function left() {
if (i == 0) {
box1.style.opacity = 0;
box2.style.opacity = 0;
box3.style.opacity = 0;
box4.style.opacity = 1;
info.innerHTML = "Image 1"
i++
}
else if (i == 1) {
box1.style.opacity = 0;
box2.style.opacity = 0;
box3.style.opacity = 1;
box4.style.opacity = 0;
info.innerHTML = "Image 2"
i++
}
else if (i == 2) {
box1.style.opacity = 0;
box2.style.opacity = 1;
box3.style.opacity = 0;
box4.style.opacity = 0;
info.innerHTML = "Image 3"
i++
}
else if (i == 3) {
box1.style.opacity = 1;
box2.style.opacity = 0;
box3.style.opacity = 0;
box4.style.opacity = 0;
info.innerHTML = "Image 4"
i = 0;
}
}
Note – all image used in this image slider is demo image. so please add images yourself for a better Image Slider. because sometimes this image work or sometimes not that’s why.
ADVERTISEMENT
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
ADVERTISEMENT
Final Output Of Image Slider Using JavaScript
ADVERTISEMENT
ADVERTISEMENT
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
ADVERTISEMENT
Now we have completed our Image Slider, Here is our updated output with JavaScript. Hope you like Image Slider. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.
Thank you!
In this post, we learn how to Create an Image Slider Using HTML, CSS, and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Written by – Code With Random/Anki
ADVERTISEMENT