How To a Create Product Slider Using HTML And JavaScript
Learn How To Make Product Slider Using HTML, CSS, And JavaScript. Easy Way To Create an eCommerce Product Slider Using HTML, CSS, And Javascript.
In This Tutorial, I will Create an E-Commerce Product Slider Using HTML And JavaScript. This Is a Very Beatifull Product Slider Which You Use in The Shopping Website For Represent The Products. You Will Create This Awesome Product Slider By Following These Steps Which I Given Below.
Video Tutorial:-
Follow These Steps:-
1) Open Your Text Editor Like Notepad++, Sublime, etc.
2) Create HTML, CSS, And Javascript Files And Put In Your Project Folder. I Recommended You To Create Separate Folders For CSS And JS Files.
3) Link The CSS File With HTML File Using “Link” Tag.4) Link The Js File With HTML Using “Script src=” Location” “ Tag.
5) Copy Product Slider HTML Code And Past In Your HTML File.
Note: Download Source Code for Free Visit ➤ E-Commerce Product Slider.
HTML
<! — doctype html →
<html>
<head>
<meta charset=”utf-8">
<meta http-equiv=”X-UA_Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, intial-scale=1.0">
<title>Ecommerce Slider</title>
<! — page-icon — — — — — →
<link rel=”shortcut icon” href=”images/logo.png”>
<! — stylesheet — — — — — — ->
<link rel=”stylesheet” type=”text/css” href=”css/style.css”>
<! — light-slider.css — — — — — — ->
<link rel=”stylesheet” type=”text/css” href=”css/lightslider.css”>
<! — Jquery — — — — — — — — — →
<script type=”text/javascript” src=”js/Jquery.js”></script>
<! — lightslider.js — — — — — — — ->
<script type=”text/javascript” src=”js/lightslider.js”></script>
</head>
<body>
<section class=”slider”>
<ul id=”autoWidth” class=”cs-hidden”>
<! — 1 — — — — — — — — — — — — — — — — — →
<li class=”item-a”>
<! — box-slider — — — — — — — ->
<div class=”box”>
<! — img-box — — — — →
<div class=”slide-img”>
<img alt=”1" src=”images/1.jpg”>
<! — overlayer — — — — →
<div class=”overlay”>
<! — buy-btn — — →
<a href=”#” class=”buy-btn”>Buy Now</a>
</div>
</div>
<! — detail-box — — — — ->
<div class=”detail-box”>
<! — type — — — →
<div class=”type”>
<a href=”#”>Rabbed Cardigan</a>
<span>Noe Arrival</span>
</div>
<! — price — — — →
<a href=”#” class=”price”>$23</a>
</div>
</div>
</li>
<! — 2 — — — — — — — — — — — — — — — — — →
<li class=”item-b”>
<! — box-slider — — — — — — — ->
<div class=”box”>
<! — img-box — — — — →
<div class=”slide-img”>
<img alt=”2" src=”images/2.jpg”>
<! — overlayer — — — — →
<div class=”overlay”>
<! — buy-btn — — →
<a href=”#” class=”buy-btn”>Buy Now</a>
</div>
</div>
<! — detail-box — — — — ->
<div class=”detail-box”>
<! — type — — — →
<div class=”type”>
<a href=”#”>Rabbed Cardigan</a>
<span>Noe Arrival</span>
</div>
<! — price — — — →
<a href=”#” class=”price”>$20</a>
</div>
</div>
</li>
<! — 3 — — — — — — — — — — — — — — — — — →
<li class=”item-c”>
<! — box-slider — — — — — — — ->
<div class=”box”>
<! — img-box — — — — →
<div class=”slide-img”>
<img alt=”3" src=”images/3.jpg”>
<! — overlayer — — — — →
<div class=”overlay”>
<! — buy-btn — — →
<a href=”#” class=”buy-btn”>Buy Now</a>
</div>
</div>
<! — detail-box — — — — ->
<div class=”detail-box”>
<! — type — — — →
<div class=”type”>
<a href=”#”>Rabbed Cardigan</a>
<span>Noe Arrival</span>
</div>
<! — price — — — →
<a href=”#” class=”price”>$26</a>
</div>
</div>
</li>
<! — 4 — — — — — — — — — — — — — — — — — →
<li class=”item-d”>
<! — box-slider — — — — — — — ->
<div class=”box”>
<! — img-box — — — — →
<div class=”slide-img”>
<img alt=”4" src=”images/4.jpg”>
<! — overlayer — — — — →
<div class=”overlay”>
<! — buy-btn — — →
<a href=”#” class=”buy-btn”>Buy Now</a>
</div>
</div>
<! — detail-box — — — — ->
<div class=”detail-box”>
<! — type — — — →
<div class=”type”>
<a href=”#”>Rabbed Cardigan</a>
<span>Noe Arrival</span>
</div>
<! — price — — — →
<a href=”#” class=”price”>$27</a>
</div>
</div>
</li>
<! — 5 — — — — — — — — — — — — — — — — — →
<li class=”item-e”>
<! — box-slider — — — — — — — ->
<div class=”box”>
<! — img-box — — — — →
<div class=”slide-img”>
<img alt=”5" src=”images/5.jpg”>
<! — overlayer — — — — →
<div class=”overlay”>
<! — buy-btn — — →
<a href=”#” class=”buy-btn”>Buy Now</a>
</div>
</div>
<! — detail-box — — — — ->
<div class=”detail-box”>
<! — type — — — →
<div class=”type”>
<a href=”#”>Rabbed Cardigan</a>
<span>Noe Arrival</span>
</div>
<! — price — — — →
<a href=”#” class=”price”>$26</a>
</div>
</div>
</li>
<! — 6 — — — — — — — — — — — — — — — — — →
<li class=”item-f”>
<! — box-slider — — — — — — — ->
<div class=”box”>
<! — img-box — — — — →
<div class=”slide-img”>
<img alt=”6" src=”images/6.jpg”>
<! — overlayer — — — — →
<div class=”overlay”>
<! — buy-btn — — →
<a href=”#” class=”buy-btn”>Buy Now</a>
</div>
</div>
<! — detail-box — — — — ->
<div class=”detail-box”>
<! — type — — — →
<div class=”type”>
<a href=”#”>Rabbed Cardigan</a>
<span>Noe Arrival</span>
</div>
<! — price — — — →
<a href=”#” class=”price”>$30</a>
</div>
</div>
</li>
<! — 7 — — — — — — — — — — — — — — — — — →
<li class=”item-g”>
<! — box-slider — — — — — — — ->
<div class=”box”>
<! — img-box — — — — →
<div class=”slide-img”>
<img alt=”7" src=”images/7.jfif”>
<! — overlayer — — — — →
<div class=”overlay”>
<! — buy-btn — — →
<a href=”#” class=”buy-btn”>Buy Now</a>
</div>
</div>
<! — detail-box — — — — ->
<div class=”detail-box”>
<! — type — — — →
<div class=”type”>
<a href=”#”>Rabbed Cardigan</a>
<span>Noe Arrival</span>
</div>
<! — price — — — →
<a href=”#” class=”price”>$33</a>
</div>
</div>
</li>
<! — 8 — — — — — — — — — — — — — — — — — →
<li class=”item-h”>
<! — box-slider — — — — — — — ->
<div class=”box”>
<! — img-box — — — — →
<div class=”slide-img”>
<img alt=”8" src=”images/8.jfif”>
<! — overlayer — — — — →
<div class=”overlay”>
<! — buy-btn — — →
<a href=”#” class=”buy-btn”>Buy Now</a>
</div>
</div>
<! — detail-box — — — — ->
<div class=”detail-box”>
<! — type — — — →
<div class=”type”>
<a href=”#”>Rabbed Cardigan</a>
<span>Noe Arrival</span>
</div>
<! — price — — — →
<a href=”#” class=”price”>$43</a>
</div>
</div>
</li>
</ul>
</section>
<! — script-link — — — — — ->
<script type=”text/javascript” src=”js/script.js”></script>
</body>
</html>
CSS
@charset “utf-8”;
/* CSS Document */
body{
margin:0px;
padding: 0px;
background-color:#eef8ff;
}
a{
text-decoration:none;
}
.box{
width:300px;
box-shadow: 2px 2px 30px rgba(0,0,0,0.2);
border-radius: 10px;
overflow: hidden;
margin: 25px;
}
.slide-img{
height: 450px;
position:relative;
}
.slide-img img{
width:100%;
height: 100%;
object-fit: cover;
box-sizing: border-box;
}
.detail-box{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
box-sizing: border-box;
font-family: calibri;
}
.type{
display: flex;
flex-direction: column;
}
.type a{
color:#222222;
margin: 5px 0px;
font-weight: 700;
letter-spacing: 0.5px;
padding-right: 8px;
}
.type span{
color:rgba(26,26,26,0.5);
}
.price{
color: #333333;
font-weight: 600;
font-size: 1.1rem;
font-family: poppins;
letter-spacing: 0.5px;
}
.overlay{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width:100%;
height: 100%;
background-color: rgba(92,95,236,0.6);
display: flex;
justify-content: center;
align-items: center;
}
.buy-btn{
width:160px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: #FFFFFF;
color:#252525;
font-weight: 700;
letter-spacing: 1px;
font-family: calibri;
border-radius: 20px;
box-shadow: 2px 2px 30px rgba(0,0,0,0.2);
}
.buy-btn:hover{
color:#FFFFFF;
background-color: #f15fa3;
transition: all ease 0.3s;
}
.overlay{
visibility: hidden;
}
.slide-img:hover .overlay{
visibility: visible;
animation:fade 0.5s;
}
@keyframes fade{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.slider{
width:100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
Javascript
// JavaScript Document
$(document).ready(function() {
$(‘#autoWidth’).lightSlider({
autoWidth:true,
loop:true,
onSliderLoad: function() {
$(‘#autoWidth’).removeClass(‘cS-hidden’);
}
});
});
➼If you have any questions about this tutorial contacts me. If you need more details about this product slider visit our website GoingtoInternet.com.
