Image Slider Using HTML,CSS and JavaScript

Create Image Slider Using HTML,CSS and JavaScript

Create Image Slider Using HTML,CSS and JavaScript

 
javascript image slider | image slider using html css javascript

 

 

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.

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.

Restaurant Website Using HTML And CSS With Source Code

Html Code Output

 

Image Slider Using HTML,CSS and JavaScript
Image Slider Using HTML,CSS and JavaScript

 

Image Slider Using HTML,CSS and JavaScript
Image Slider Using HTML,CSS and JavaScript

 

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.

50+ HTML, CSS & JavaScript Projects With Source Code

Output

 

Image Slider Using HTML,CSS and JavaScript
Image Slider Using HTML,CSS and JavaScript

 

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.

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

Final Output Of Image Slider Using JavaScript

Image Slider Using HTML,CSS and JavaScript
Image Slider Using HTML,CSS and JavaScript

 

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

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.

ADVERTISEMENT

Written by – Code With Random/Anki 

ADVERTISEMENT



Tags: ,

Leave a Reply