How To Create Product Slider Using HTML And JavaScript

Craete E-Commerce Product Slider Using HTML CSS

Product Slider Using 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.



How To Create E-Commerce Product Slider Using HTML CSS And JavaScript

  1. 0.0 - 0.45 min : Intro
  2. 0.45 - 18.0 min: Responsive E-Commerce Product Slider Using HTML CSS And JavaScript


About This Tutorial

Hey! In This Tutorial I Will Teach You How To Make an E-commerce Product Slider Using HTML CSS And JavaScript.This Is Very Easy. In This Tutorial Videl First 60s, I Will Show You the Product Slider Design Which I Create In This Tutorial. Then I Will Create HTML, CSS, And Javascript Files And Put In The Project Folder. After Creating I Linked The CSS And Js File With HTML. First I Create a Sigle Box Of The Sider Using HTML And Design USing CSS. After Making This Box, I used Light Slider For Making Slider. I Use Some External File Which Links Given In This Page. If You Face Any Problem, Check My Youtube Tutorial Which I Given Ablow.

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.

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>

6) Copy Product Slider CSS Code And Past In Your CSS File.

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;
}

7) Copy Product Slider Js Code And Past In Your JS File

Javascript
// JavaScript Document
$(document).ready(function() {
    $('#autoWidth').lightSlider({
        autoWidth:true,
        loop:true,
        onSliderLoad: function() {
            $('#autoWidth').removeClass('cS-hidden');
        } 
    });  
  });

8) Download Lightslider.css File And Put In The CSS Folder, Download Lightslider.js And Jquery.js And Put In The Js Folder, Download Control Image And Put In The "Img" Folder. Folder Name "Img" Must Me Same. All Files Links Is Given Below.



How To Dowload Files


Comments

  1. eso es javascript o es Jqery ?

    ReplyDelete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
  3. how can i implement 2 row slider ?

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. Hello, Pls can't I use this rows in the same page?

    ReplyDelete
  6. Replies
    1. hey dude i have some problem
      u should go to lightslider.css and find class cS-hidden
      now only change opacity to 1

      Delete
    2. Thank you so much!! The images are showing correctly!!

      Delete
  7. thankyou so much for sharing this, really helpfull<3

    ReplyDelete
  8. I'm having issues with the images displaying vertically rather than horizontally. Anyone else experience this? Know of a fix?

    ReplyDelete

Archive

Contact Form

Send