NiceSnippets.com
Carousel Product Slider Example Usign html,css
We are providing you product slider design example. this is very simple for use. we are use carousel jquery for this slider design. this is very smooth animation slider design. this is easy to use in your project. also this slider call multi image slider.
We allows to free snippets of carousel product slider bootstrap , you can download full code of product slider responsive layout. Here in this post i will give you example of carousel product slider responsive snippet and you will get simple code of html, css and jquery. In carousel product slider jquery snippet i give you three tab with html, css and js, you can easily get code of bootstrap product slider free download layout.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="//nicesnippets.com/demo/jsCarousel-2.0.0.js" type="text/javascript"></script>
<link href="custom.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<br><br>
<h1 class="title"> Ecommerce Product Slider Design</h1>
<div id="product-slider">
<div class="product-box">
<img src="//nicesnippets.com/demo/pro1.jpeg"/>
<div class="product-desc">
<h4>ABBOTT LYON</h4>
<p>$ 20.00</p>
<button>ADD TO CART</button>
</div>
</div>
<div class="product-box">
<img src="//nicesnippets.com/demo/pro2.jpeg"/>
<div class="product-desc">
<h4>BEN SHERMAN</h4>
<p>$ 25.00</p>
<button>ADD TO CART</button>
</div>
</div>
<div class="product-box">
<img src="//nicesnippets.com/demo/pro3.jpeg"/>
<div class="product-desc">
<h4>CANNIBAL</h4>
<p>$ 35.00</p>
<button>ADD TO CART</button>
</div>
</div>
<div class="product-box">
<img src="//nicesnippets.com/demo/pro4.jpeg"/>
<div class="product-desc">
<h4>DAISY DIXON</h4>
<p>$ 21.00</p>
<button>ADD TO CART</button>
</div>
</div>
<div class="product-box">
<img src="//nicesnippets.com/demo/pro5.jpeg"/>
<div class="product-desc">
<h4>SELYSEE</h4>
<p>$ 40.00</p>
<button>ADD TO CART</button>
</div>
</div>
<div class="product-box">
<img src="//nicesnippets.com/demo/pro5.jpeg"/>
<div class="product-desc">
<h4>FIORELLI</h4>
<p>$ 25.00</p>
<button>ADD TO CART</button>
</div>
</div>
<div class="product-box">
<img src="//nicesnippets.com/demo/pro6.jpeg"/>
<div class="product-desc">
<h4>GARMIN</h4>
<p>$ 50.00</p>
<button>ADD TO CART</button>
</div>
</div>
<div class="product-box">
<img src="//nicesnippets.com/demo/pro7.jpeg"/>
<div class="product-desc">
<h4>HENRY LONDON</h4>
<p>$ 45.00</p>
<button>ADD TO CART</button>
</div>
</div>
<div class="product-box">
<img src="//nicesnippets.com/demo/pro8.jpeg"/>
<div class="product-desc">
<h4>JEAN PIERRE</h4>
<p>$ 40.00</p>
<button>ADD TO CART</button>
</div>
</div>
<div class="product-box">
<img src="//nicesnippets.com/demo/pro9.jpeg"/>
<div class="product-desc">
<h4>LAMBRETTA</h4>
<p>$ 59.00</p>
<button>ADD TO CART</button>
</div>
</div>
<div class="product-box">
<img src="//nicesnippets.com/demo/pro10.jpeg"/>
<div class="product-desc">
<h4>LOLA ROSE</h4>
<p>$ 39.00</p>
<button>ADD TO CART</button>
</div>
</div>
<div class="product-box">
<img src="//nicesnippets.com/demo/pro11.jpeg"/>
<div class="product-desc">
<h4>MORGAN</h4>
<p>$ 45.00</p>
<button>ADD TO CART</button>
</div>
</div>
<div class="product-box">
<img src="//nicesnippets.com/demo/pro12.jpeg"/>
<div class="product-desc">
<h4>OLIVIA BURTON</h4>
<p>$ 50.00</p>
<button>ADD TO CART</button>
</div>
</div>
<div class="product-box">
<img src="//nicesnippets.com/demo/pro13.jpeg"/>
<div class="product-desc">
<h4>PIERRE LANNIER</h4>
<p>$ 52.00</p>
<button>ADD TO CART</button>
</div>
</div>
<div class="product-box">
<img src="//nicesnippets.com/demo/pro14.jpeg"/>
<div class="product-desc">
<h4>ROAMER</h4>
<p>$ 26.00</p>
<button>ADD TO CART</button>
</div>
</div>
<div class="product-box">
<img src="//nicesnippets.com/demo/pro15.jpeg"/>
<div class="product-desc">
<h4>SKAGEN</h4>
<p>$ 34.00</p>
<button>ADD TO CART</button>
</div>
</div>
</div>
</body>
</html>
body{
font-family: 'Raleway', sans-serif;
background-color: #F98071;
margin: 0px;
}
body h1.title{
text-align: center;
color: #fff;
}
.visible{
display: block;
}
.hidden{
display: none;
}
#product-slider{
background-color: #fff;
}
.product-box{
background-color: #f1f1f1;
text-align: center;
}
.product-desc{
font-weight: bold;
padding: 10px 0px;
}
.product-desc h4{
margin: 0;
color: #446AAF;
font-size: 16px;
}
.product-desc p{
color: #3C3F39;
margin: 10px 0px 8px;
}
.product-desc button{
padding: 9px 15px;
border-radius: 3px;
border: 1px solid #c1c1c1;
font-weight: bold;
color: #2868AF;
background: linear-gradient(#FAFDFF, #E8E8E8);
background: -moz-linear-gradient(#FAFDFF, #E8E8E8);
background: -webkit-linear-gradient(#FAFDFF, #E8E8E8);
cursor: pointer;
font-family: 'Raleway', sans-serif;
}
.jscarousal-horizontal{
width: 70%;
overflow: hidden;
height: 280px;
padding: 30px 15px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.jscarousal-horizontal-back, .jscarousal-horizontal-forward{
float: left;
width: 23px;
position: relative;
top: 50px;
cursor: pointer;
color: #5D5D5D;
font-size: 22px;
}
.jscarousal-horizontal-forward{
float: right;
}
.jscarousal-horizontal-back:before, .jscarousal-horizontal-forward:before{
font-family: FontAwesome;
}
.jscarousal-horizontal-back:before{
content: "\f053";
}
.jscarousal-horizontal-forward:before{
content: "\f054";
}
.jscarousal-contents-horizontal{
width: calc(100% - 50px);
height: 100%;
float: left;
position: relative;
overflow: hidden;
}
.jscarousal-contents-horizontal > .visible{
position: absolute;
width: 100%;
}
.jscarousal-contents-horizontal > .visible > .product-box{
float: left;
margin: 0px 1%;
width: 18%;
}
.jscarousal-contents-horizontal img{
width: 100%;
}
