Best Featured Product Slider Shopify
 |
| Featured Product Slider Shopify Code |
Source Code of Featured Product Slider Shopify
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<title>Featured Product Slider Shopify Code</title>
<style>
body{
background-image: linear-gradient(to right top, #053705, #4c4200, #9e2d00, #e50059, #d812eb);
background-repeat: no-repeat;
background-size:cover;
height: 100vh;
}
.post-slide{
margin: 0 10px;
background:#fff;
padding: 4px;
}
.post-slide .post-info{
padding: 5px 0;
margin: 0;
list-style: none;
}
.post-slide .post-info li{
display: inline-block;
margin: 0 5px;
}
.post-slide .post-info li i{
margin-right: 8px;
}
.post-slide .post-info li a{
font-size: 11px;
font-weight: bold;
color: #7e828a;
text-transform: uppercase;
}
.post-slide .post-info li a:hover{
color: #1dcfd1;
text-decoration: none;
}
.post-slide .post-img{
position: relative;
}
.post-slide .post-img:before{
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: rgba(0, 0,0,0.6);
transition: opacity 0.40s linear 0s;
}
.post-slide:hover .post-img:before{
opacity: 1;
}
.post-slide .post-img img{
width: 100%;
height: auto;
}
.post-slide .read{
position: absolute;
bottom: 30px;
left: 50px;
font-size: 14px;
color: #fff;
text-transform: capitalize;
opacity: 0;
transition: all 0.40s linear 0s;
}
.post-slide:hover .read{
opacity:1;
}
.post-slide .read:hover{
text-decoration: none;
color: #1dcfd1;
}
.post-slide .post-content{
position: relative;
}
.post-slide .post-author{
width: 75px;
height: 75px;
border-radius: 50%;
position: absolute;
top: -45px;
right: 10px;
overflow: hidden;
border:4px solid #fff;
}
.post-slide .post-author img{
width: 100%;
height: auto;
}
.post-slide .post-title{
font-size: 14px;
font-weight: bold;
color: #1dcfd1;
margin: 0 0 10px 0;
text-transform: uppercase;
transition: all 0.30s linear 0s;
}
.post-slide .post-title:after{
content: "";
width: 25px;
display: block;
margin-top: 10px;
border-bottom: 4px solid #333;
}
.post-slide .post-description{
font-size: 13px;
color: #555;
margin-bottom:20px;
}
.post-slide .read-more{
display: inline-block;
padding: 5px 10px;
font-size: 14px;
font-weight: bold;
color: #fff;
background: #1dcfd1;
border-bottom-right-radius: 10px;
text-transform: capitalize;
transition: all 0.30s linear;
}
.post-slide .read-more:hover{
background: #333;
text-decoration: none;
}
</style>
</head>
<body>
<center><h1 class="text-white">Featured Product Slider Shopify Code</h1><hr></center>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="news-slider" class="owl-carousel">
<div class="post-slide">
<div class="post-img">
<img src="img-1.jpg" alt="">
<a href="#" class="read">read more</a>
</div>
<div class="post-content">
<span class="post-author">
<a href="#"><img src="ww.jpg" alt=""></a>
</span>
<h3 class="post-title p-1">Latest Product Name</h3>
<p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus? Accusantium.</p>
<ul class="post-info">
<li><p><b>₹ 1200</b> ₹<strike>300</strike></p></li>
<li><i class="fa fa-calendar"></i><a href="#">May 6, 2021</a></li>
</ul>
<p><a href="#" class="read-more">Buy Now</a>
<a href="#" class="read-more">add to cart</a></p>
</div>
</div>
<div class="post-slide">
<div class="post-img">
<img src="img-2.jpg" alt="">
<a href="#" class="read">read more</a>
</div>
<div class="post-content">
<span class="post-author">
<a href="#"><img src="ww.jpg" alt=""></a>
</span>
<h3 class="post-title p-1">Latest Product Name</h3>
<p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus? Accusantium.</p>
<ul class="post-info">
<li><p><b>₹ 1200</b> ₹<strike>300</strike></p></li>
<li><i class="fa fa-calendar"></i><a href="#">May 6, 2021</a></li>
</ul>
<p><a href="#" class="read-more">Buy Now</a>
<a href="#" class="read-more">add to cart</a></p>
</div>
</div>
<div class="post-slide">
<div class="post-img">
<img src="img-3.jpg" alt="">
<a href="#" class="read">read more</a>
</div>
<div class="post-content">
<span class="post-author">
<a href="#"><img src="ww.jpg" alt=""></a>
</span>
<h3 class="post-title p-1">Latest Product Name</h3>
<p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus? Accusantium.</p>
<ul class="post-info">
<li><p><b>₹ 1200</b> ₹<strike>300</strike></p></li>
<li><i class="fa fa-calendar"></i><a href="#">May 6, 2021</a></li>
</ul>
<p><a href="#" class="read-more">Buy Now</a>
<a href="#" class="read-more">add to cart</a></p>
</div>
</div>
<div class="post-slide">
<div class="post-img">
<img src="img-4.jpg" alt="">
<a href="#" class="read">read more</a>
</div>
<div class="post-content">
<span class="post-author">
<a href="#"><img src="ww.jpg" alt=""></a>
</span>
<h3 class="post-title p-1">Latest Product Name</h3>
<p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus? Accusantium.</p>
<ul class="post-info">
<li><p><b>₹ 1200</b> ₹<strike>300</strike></p></li>
<li><i class="fa fa-calendar"></i><a href="#">May 6, 2021</a></li>
</ul>
<p><a href="#" class="read-more">Buy Now</a>
<a href="#" class="read-more">add to cart</a></p>
</div>
</div>
<div class="post-slide">
<div class="post-img">
<img src="img-5.jpg" alt="">
<a href="#" class="read">read more</a>
</div>
<div class="post-content">
<span class="post-author">
<a href="#"><img src="ww.jpg" alt=""></a>
</span>
<h3 class="post-title p-1">Latest Product Name</h3>
<p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus? Accusantium.</p>
<ul class="post-info">
<li><p><b>₹ 1200</b> ₹<strike>300</strike></p></li>
<li><i class="fa fa-calendar"></i><a href="#">May 6, 2021</a></li>
</ul>
<p><a href="#" class="read-more">Buy Now</a>
<a href="#" class="read-more">add to cart</a></p>
</div>
</div>
<div class="post-slide">
<div class="post-img">
<img src="img-6.jpg" alt="">
<a href="#" class="read">read more</a>
</div>
<div class="post-content">
<span class="post-author">
<a href="#"><img src="ww.jpg" alt=""></a>
</span>
<h3 class="post-title p-1">Latest Product Name</h3>
<p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus? Accusantium.</p>
<ul class="post-info">
<li><p><b>₹ 1200</b> ₹<strike>300</strike></p></li>
<li><i class="fa fa-calendar"></i><a href="#">May 6, 2021</a></li>
</ul>
<p><a href="#" class="read-more">Buy Now</a>
<a href="#" class="read-more">add to cart</a></p>
</div>
</div>
<div class="post-slide">
<div class="post-img">
<img src="img-7.jpg" alt="">
<a href="#" class="read">read more</a>
</div>
<div class="post-content">
<span class="post-author">
<a href="#"><img src="ww.jpg" alt=""></a>
</span>
<h3 class="post-title p-1">Latest Product Name</h3>
<p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus? Accusantium.</p>
<ul class="post-info">
<li><p><b>₹ 1200</b> ₹<strike>300</strike></p></li>
<li><i class="fa fa-calendar"></i><a href="#">May 6, 2021</a></li>
</ul>
<p><a href="#" class="read-more">Buy Now</a>
<a href="#" class="read-more">add to cart</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Option 1: Bootstrap Bundle with Popper -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<script>
$(document).ready(function() {
$("#news-slider").owlCarousel({
items:3,
itemsDesktop:[1199,3],
itemsDesktopSmall:[1000,2],
itemsMobile:[600,1],
pagination:false,
navigationText:false,
autoPlay:true
});
});
</script>
</body>
</html>
Download Source Code of Featured Product Slider Shopify -
0 Comments