blog slider

<div class="blog-slider">  <!-- Single blog -->  <div class="sin-blog">    <!-- Blog Image -->    <div class="blog-image">      <a href="#"><img src="img/blog/1.jpg" alt="" /></a>      <!-- Blog Date -->      <div class="blog-date text-center"><h4>07</h4><p>May</p></div>    </div>    <!-- Blog Details -->    <div class="blog-details">      <!-- Blog Meta -->      <div class="blog-meta fix">        <p class="author float-left"><a href="#"><i class="zmdi zmdi-account"></i> By Admin</a></p>        <p class="comment-like float-right"><a href="#"><i class="zmdi zmdi-comment-outline"></i> (15)</a><a href="#"><i class="zmdi zmdi-favorite-outline"></i> (225)</a></p>      </div>      <!-- Blog Title -->      <h4 class="blog-title"><a href="#">How to Improve Your Sales Volume</a></h4>      <p>Lorem ipsum dolor sit amet, consectetur adipisic ing elit, sed do eiusmodte porincididunvt...</p>      <a class="read-more" href="#">Continue Reading</a>    </div>  </div>  <!-- Single blog -->  <div class="sin-blog">    <!-- Blog Image -->    <div class="blog-image">      <a href="#"><img src="img/blog/2.jpg" alt="" /></a>      <!-- Blog Date -->      <div class="blog-date text-center"><h4>07</h4><p>May</p></div>    </div>    <!-- Blog Details -->    <div class="blog-details">      <!-- Blog Meta -->      <div class="blog-meta fix">        <p class="author float-left"><a href="#"><i class="zmdi zmdi-account"></i> By Admin</a></p>        <p class="comment-like float-right"><a href="#"><i class="zmdi zmdi-comment-outline"></i> (15)</a><a href="#"><i class="zmdi zmdi-favorite-outline"></i> (225)</a></p>      </div>      <!-- Blog Title -->      <h4 class="blog-title"><a href="#">How to Improve Your Sales Volume</a></h4>      <p>Lorem ipsum dolor sit amet, consectetur adipisic ing elit, sed do eiusmodte porincididunvt...</p>      <a class="read-more" href="#">Continue Reading</a>    </div>  </div>  <!-- Single blog -->  <div class="sin-blog">    <!-- Blog Image -->    <div class="blog-image">      <a href="#"><img src="img/blog/3.jpg" alt="" /></a>      <!-- Blog Date -->      <div class="blog-date text-center"><h4>07</h4><p>May</p></div>    </div>    <!-- Blog Details -->    <div class="blog-details">      <!-- Blog Meta -->      <div class="blog-meta fix">        <p class="author float-left"><a href="#"><i class="zmdi zmdi-account"></i> By Admin</a></p>        <p class="comment-like float-right"><a href="#"><i class="zmdi zmdi-comment-outline"></i> (15)</a><a href="#"><i class="zmdi zmdi-favorite-outline"></i> (225)</a></p>      </div>      <!-- Blog Title -->      <h4 class="blog-title"><a href="#">How to Improve Your Sales Volume</a></h4>      <p>Lorem ipsum dolor sit amet, consectetur adipisic ing elit, sed do eiusmodte porincididunvt...</p>      <a class="read-more" href="#">Continue Reading</a>    </div>  </div>  <!-- Single blog -->  <div class="sin-blog">    <!-- Blog Image -->    <div class="blog-image">      <a href="#"><img src="img/blog/4.jpg" alt="" /></a>      <!-- Blog Date -->      <div class="blog-date text-center"><h4>07</h4><p>May</p></div>    </div>    <!-- Blog Details -->    <div class="blog-details">      <!-- Blog Meta -->      <div class="blog-meta fix">        <p class="author float-left"><a href="#"><i class="zmdi zmdi-account"></i> By Admin</a></p>        <p class="comment-like float-right"><a href="#"><i class="zmdi zmdi-comment-outline"></i> (15)</a><a href="#"><i class="zmdi zmdi-favorite-outline"></i> (225)</a></p>      </div>      <!-- Blog Title -->      <h4 class="blog-title"><a href="#">How to Improve Your Sales Volume</a></h4>      <p>Lorem ipsum dolor sit amet, consectetur adipisic ing elit, sed do eiusmodte porincididunvt...</p>      <a class="read-more" href="#">Continue Reading</a>    </div>  </div></div>

.sin-blog{}.blog-image {  position: relative;}.blog-image a {  display: block;  position: relative;}.blog-image a::before {  background: #000 none repeat scroll 0 0;  bottom: 0;  content: "";  left: 0;  opacity: 0.4;  position: absolute;  right: 0;  top: 0;  transform: rotateX(90deg);  z-index: 1;}.sin-blog:hover .blog-image a::before {  transform: rotateX(0);}.blog-image a img, .blog-image img {  width: 100%;}.blog-date {  background: #fff none repeat scroll 0 0;  height: 63px;  left: 5px;  padding: 14px 0;  position: absolute;  top: 5px;  width: 63px;  z-index: 1;}.blog-date h4 {  font-size: 18px;  font-weight: 500;  letter-spacing: 0.6px;  line-height: 14px;  margin: 0 0 10px;}.blog-date p {  font-weight: 300;  line-height: 12px;}.blog-details {  background: #fff none repeat scroll 0 0;  padding: 10px 15px 13px;  text-align: left;}.blog-details .blog-meta {  margin-bottom: 6px;}.blog-details .blog-meta p {  font-size: 12px;  font-weight: 500;  margin: 0;}.blog-details .blog-meta p a {  color: #909090;  display: block;  float: left;  margin-right: 18px;}.blog-details .blog-meta p a:last-child {  margin-right: 0;}.blog-details .blog-meta p a:hover {}.blog-details .blog-meta p a i {  display: block;  float: left;  font-size: 14px;  line-height: 22px;  margin-right: 5px;}.blog-details .blog-title {  font-size: 17px;  font-weight: 500;  line-height: 32px;  margin: 0 0 3px;}.blog-details .blog-title a {  color: #303030;}.blog-details .blog-title a:hover {}.blog-details >p {  font-size: 13px;  font-weight: 300;}.blog-details .read-more {  font-weight: 300;}

$('.blog-slider').owlCarousel({    loop: true,    dots: false,    nav: true,    navText: ['',''],    margin: 30,    responsive: {        1200:{            items:3        },        970:{            items:2        },        768:{            items:2,                        nav: false,        },        0:{            items:1,                    nav: false,        },    }})