Ecommerce product slider | Responsive E-commerce Product Slider

ecommerce product slider codepen

Hello Friends today in this article i will provides you full responsive e-commerce product slider, You can use this product slider in e-commerce website and other websites in which you want to show product slider.

Here i will provide the complete source code of Responsive
carousel product slider
.

Let’s Know How to Create Responsive Product Slider

Step-1 Add these Css and Javascript file in your webpage head section.

<link rel="stylesheet" type="text/css" href="http://schauhan.in/Examples/ecommerce_product_slider/style1.css" />
<link rel="stylesheet" type="text/css" href="http://schauhan.in/Examples/ecommerce_product_slider/lightslider.css" />
<script src="http://schauhan.in/Examples/ecommerce_product_slider/jquery-3.5.1.js" ></script>
<script src="http://schauhan.in/Examples/ecommerce_product_slider/lightslider.js" ></script>
<script>
	  $(document).ready(function() {
    $('#autoWidth').lightSlider({
        autoWidth:true,
        loop:true,
        onSliderLoad: function() {
            $('#autoWidth').removeClass('cS-hidden');
        } 
    });  
  });
	</script>

Step-2 Add this html to your webpage body section.

<section class="slider">
	<ul id="autoWidth" class="cs-hidden">

  <li class="item-a">
	<div class="box">
	<div class="slide-img">
	<img alt="schauhan.in responsive product slider using html css and javascript" src="E-slider-images/1.jpg">
	<div class="overlay">
	<a href="#" class="buy-btn">Book Now</a>	
	</div>
	</div>
	<div class="detail-box">
	<div class="type">
	<a href="#">Andman</a>
	    <span>Tour</span>
	</div>
	<a href="#" class="price">$45</a>
	</div>
	</div>		
   </li>
   
   
    <li class="item-a">
	<div class="box">
	<div class="slide-img">
	<img alt="schauhan.in responsive product slider using html css and javascript" src="E-slider-images/2.jpg">
	<div class="overlay">
	<a href="#" class="buy-btn">Book Now</a>	
	</div>
	</div>
	<div class="detail-box">
	<div class="type">
	<a href="#">Bhutan</a>
	    <span>Tour Package</span>
	</div>
	<a href="#" class="price">$23</a>
	</div>
	</div>		
   </li>
   
   
    <li class="item-a">
	<div class="box">
	<div class="slide-img">
	<img alt="schauhan.in responsive product slider using html css and javascript" src="E-slider-images/3.jpg">
	<div class="overlay">
	<a href="#" class="buy-btn">Book Now</a>	
	</div>
	</div>
	<div class="detail-box">
	<div class="type">
	<a href="#">Darjeeling</a>
	    <span>Tour Package</span>
	</div>
	<a href="#" class="price">$23</a>
	</div>
	</div>		
   </li>
   
   
    <li class="item-a">
	<div class="box">
	<div class="slide-img">
	<img alt="schauhan.in responsive product slider using html css and javascript" src="E-slider-images/4.jpg">
	<div class="overlay">
	<a href="#" class="buy-btn">Book Now</a>	
	</div>
	</div>
	<div class="detail-box">
	<div class="type">
	<a href="#">Himanchal</a>
	  <span>Tour Package</span>
	</div>
	<a href="#" class="price">$23</a>
	</div>
	</div>		
   </li>
   
   
    <li class="item-a">
	<div class="box">
	<div class="slide-img">
	<img alt="schauhan.in responsive product slider using html css and javascript" src="E-slider-images/5.jpg">
	<div class="overlay">
	<a href="#" class="buy-btn">Book Now</a>	
	</div>
	</div>
	<div class="detail-box">
	<div class="type">
	<a href="#">Kerala</a>
	    <span>Tour Package</span>
	</div>
	<a href="#" class="price">$23</a>
	</div>
	</div>		
   </li>
   
   
    <li class="item-a">
	<div class="box">
	<div class="slide-img">
	<img alt="schauhan.in responsive product slider using html css and javascript" src="E-slider-images/6.jpg">
	<div class="overlay">
	<a href="#" class="buy-btn">Book Now</a>	
	</div>
	</div>
	<div class="detail-box">
	<div class="type">
	<a href="#">Laddakh</a>
	    <span>Tour Package</span>
	</div>
	<a href="#" class="price">$23</a>
	</div>
	</div>		
   </li>
   
   
    <li class="item-a">
	<div class="box">
	<div class="slide-img">
	<img alt="schauhan.in responsive product slider using html css and javascript" src="E-slider-images/7.jpg">
	<div class="overlay">
	<a href="#" class="buy-btn">Buy Now</a>	
	</div>
	</div>
	<div class="detail-box">
	<div class="type">
	<a href="#">Uttarakhand</a>
	   <span>Tour Package</span>
	</div>
	<a href="#" class="price">$23</a>
	</div>
	</div>		
   </li>
   
   
    <li class="item-a">
	<div class="box">
	<div class="slide-img">
	<img alt="schauhan.in responsive product slider using html css and javascript" src="E-slider-images/8.jpg">
	<div class="overlay">
	<a href="#" class="buy-btn">Book Now</a>	
	</div>
	</div>
	<div class="detail-box">
	<div class="type">
	<a href="#">Nepal</a>
	    <span>Tour Package</span>
	</div>
	<a href="#" class="price">$23</a>
	</div>
	</div>		
   </li>
   
   
    <li class="item-a">
	<div class="box">
	<div class="slide-img">
	<img alt="schauhan.in responsive product slider using html css and javascript" src="E-slider-images/9.jpg">
	<div class="overlay">
	<a href="#" class="buy-btn">Book Now</a>	
	</div>
	</div>
	<div class="detail-box">
	<div class="type">
	<a href="#">Rajasthan</a>
	   <span>Tour Package</span>
	</div>
	<a href="#" class="price">$23</a>
	</div>
	</div>		
   </li>
   
   
    <li class="item-a">
	<div class="box">
	<div class="slide-img">
	<img alt="schauhan.in responsive product slider using html css and javascript" src="E-slider-images/10.jpg">
	<div class="overlay">
	<a href="#" class="buy-btn">Book Now</a>	
	</div>
	</div>
	<div class="detail-box">
	<div class="type">
	<a href="#">Goa</a>
	   <span>Tour Package</span>
	</div>
	<a href="#" class="price">$23</a>
	</div>
	</div>		
   </li>
   
   
   
   
	
  
</ul>
	</section>

Leave a Reply

avatar
  Subscribe  
Notify of