Shopify Product Image Slider
Hello Viewer, Here you’ll Find Code Shopify Product Image Slider Source Code and now I’m going to Create a Shopify Product Image Slider.
 |
| Best Shopify Product Image Slider 2021 |
Shopify Product Image Slider Source Code -
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
<title>Shopify Product Image Slider</title>
<style>
body{
background-image: linear-gradient(to right top, #141111, #453f3c, #79736c, #aeaca0, #e1ebdc);
background-repeat: no-repeat;
background-size:cover;
height: 100vh;
}
.post-slide{
overflow: hidden;
margin-right: 15px;
}
.post-slide .post-img {
float: left;
width:50%;
position: relative;
margin-right: 30px;
}
.post-slide .post-img img{
width: 100%;
height: auto;
}
.post-slide .post-date{
background: #ec3c6a;
color:#fff;
position: absolute;
top: 0;
right: 0;
display: block;
padding: 2% 3%;
width: 60px;
height: 60px;
text-align: center;
transition:all 0.50s ease;
}
.post-slide .date{
display: block;
font-size:20px;
font-weight: 700;
}
.post-slide .month{
display: block;
font-size:11px;
text-transform: uppercase;
}
.post-slide .post-review {
padding: 5% 3% 1% 2%;
border: 3px solid #fff;
}
.post-slide:hover .post-review{
border-color:#ec3c6a;
box-shadow: 0px 0px 20px rgba(0,0,0,.6);
}
.post-slide .post-title{
margin:0 0 10px 0;
}
.post-slide .post-title a{
font-size:14px;
color:#fff;
text-transform:uppercase;
}
.post-slide .post-title a:hover{
text-decoration:none;
font-weight: bold;
}
.post-slide .post-bar{
padding:0;
list-style:none;
text-transform:uppercase;
position: relative;
margin-bottom: 20px;
}
.post-slide .post-bar:after,
.post-slide .post-bar:before{
border: 1px solid #38cfd8;
bottom: -10px;
content: "";
display: block;
position: absolute;
right: 36%;
width: 25px;
}
.post-slide .post-bar:before{
border: 1px solid #ec3c6a;
right: 32%;
}
.post-slide .post-bar li{
color:#555;
font-size:10px;
margin-right:10px;
display:inline-block;
}
.post-slide .post-bar li a{
font-size: 13px;
text-decoration:none;
text-transform:uppercase;
color:#ec3c6a;
}
.post-slide .post-bar li a:hover{
color:#ec3c6a;
}
.post-slide .post-bar li i{
color:#777;
margin-right:5px;
}
.post-slide .post-description{
font-size:12px;
line-height:21px;
color:#444454;
}
.owl-theme .owl-controls{
margin-top: 30px;
}
.owl-theme .owl-controls .owl-page span{
background: #fff;
border: 2px solid #37a6a4;
}
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span{
background: #37a6a4;
}
@media only screen and (max-width: 990px) {
.post-slide .post-img {
width:100%;
}
.post-slide .post-review{
width:100%;
border-bottom: 4px solid #ec3c6a;
}
.post-slide .post-bar:before{
left: 0;
}
.post-slide .post-bar:after{
left: 25px;
}
}
.post-review .post-description{
color:white;
}
.post-review .post-bar{
font-weight: bold;
}
</style>
</head>
<body>
<center><h1 class="text-white">Shopify Product Image Slider</h1><hr></center>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="product-slider" class="owl-carousel">
<div class="post-slide">
<div class="post-img">
<a href="#">
<img src="img-1.jpg" alt="">
<div class="post-date">
<span class="date">7</span>
<span class="month">May</span>
</div>
</a>
</div>
<div class="post-review">
<h3 class="post-title"><a href="#">Latest Product Name</a></h3>
<ul class="post-bar">
<li><i class="fa fa-user"></i><a href="#">Author</a></li>
<li><a href="#" class="text-white"><b>₹ 1400</b> ₹<strike>300</strike></a></li>
</ul>
<p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad magni, </p>
</div>
</div>
<div class="post-slide">
<div class="post-img">
<a href="#">
<img src="img-2.jpg" alt="">
<div class="post-date">
<span class="date">7</span>
<span class="month">May</span>
</div>
</a>
</div>
<div class="post-review">
<h3 class="post-title"><a href="#">Latest Product Name</a></h3>
<ul class="post-bar">
<li><i class="fa fa-user"></i><a href="#">Author</a></li>
<li><a href="#" class="text-white"><b>₹ 1400</b> ₹<strike>300</strike></a></li>
</ul>
<p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad magni, </p>
</div>
</div>
<div class="post-slide">
<div class="post-img">
<a href="#">
<img src="img-3.jpg" alt="">
<div class="post-date">
<span class="date">7</span>
<span class="month">May</span>
</div>
</a>
</div>
<div class="post-review">
<h3 class="post-title"><a href="#">Latest Product Name</a></h3>
<ul class="post-bar">
<li><i class="fa fa-user"></i><a href="#">Author</a></li>
<li><a href="#" class="text-white"><b>₹ 1400</b> ₹<strike>300</strike></a></li>
</ul>
<p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad magni, </p>
</div>
</div>
<div class="post-slide">
<div class="post-img">
<a href="#">
<img src="img-4.jpg" alt="">
<div class="post-date">
<span class="date">7</span>
<span class="month">May</span>
</div>
</a>
</div>
<div class="post-review">
<h3 class="post-title"><a href="#">Latest Product Name</a></h3>
<ul class="post-bar">
<li><i class="fa fa-user"></i><a href="#">Author</a></li>
<li><a href="#" class="text-white"><b>₹ 1400</b> ₹<strike>300</strike></a></li>
</ul>
<p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad magni, </p>
</div>
</div>
<div class="post-slide">
<div class="post-img">
<a href="#">
<img src="img-5.jpg" alt="">
<div class="post-date">
<span class="date">7</span>
<span class="month">May</span>
</div>
</a>
</div>
<div class="post-review">
<h3 class="post-title"><a href="#">Latest Product Name</a></h3>
<ul class="post-bar">
<li><i class="fa fa-user"></i><a href="#">Author</a></li>
<li><a href="#" class="text-white"><b>₹ 1400</b> ₹<strike>300</strike></a></li>
</ul>
<p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad magni, </p>
</div>
</div>
<div class="post-slide">
<div class="post-img">
<a href="#">
<img src="img-6.jpg" alt="">
<div class="post-date">
<span class="date">7</span>
<span class="month">May</span>
</div>
</a>
</div>
<div class="post-review">
<h3 class="post-title"><a href="#">Latest Product Name</a></h3>
<ul class="post-bar">
<li><i class="fa fa-user"></i><a href="#">Author</a></li>
<li><a href="#" class="text-white"><b>₹ 1400</b> ₹<strike>300</strike></a></li>
</ul>
<p class="post-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad magni, </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() {
$("#product-slider").owlCarousel({
items : 2,
itemsDesktop : [1199,2],
itemsMobile : [600,1],
pagination :true,
autoPlay : true
});
});
</script>
</body>
</html>
Download Best Shopify Product Image Slider Source Code -
0 Comments