Product Slider

 
<div class="product-slider">
  <!-- Single Product -->
  <div class="sin-pro">
  <!-- Product Image -->
  <div class="sin-pro-img-action fix">
  <a href="#" class="sin-pro-img"><img src="../img/product/1.jpg" alt="" /></a>
  <a href="#pro-quick-view" class="pro-quick-view" data-toggle="modal"><i class="zmdi zmdi-plus-circle-o"></i></a>
  <!-- Product Action -->
  <div class="sin-pro-action">
  <button class="pro-act-btn btn-icon"><i class="zmdi zmdi-refresh"></i></button>
  <button class="pro-act-btn btn-text">add to bag</button>
  <button class="pro-act-btn btn-icon"><i class="zmdi zmdi-favorite-outline"></i></button>
  </div>
  </div>
  <!-- Product Details -->
  <div class="sin-pro-details fix">
  <a class="sin-pro-title" href="#">Full sleev women shirt</a>
  <!-- Product Price -->
  <div class="sin-pro-price float-left">
  <span class="new">$ 85.00</span>
  </div>
  <!-- Product Ratting -->
  <div class="sin-pro-ratting float-right">
  <div class="rattings float-left">
  <i class="zmdi zmdi-star"></i>
  <i class="zmdi zmdi-star"></i>
  <i class="zmdi zmdi-star"></i>
  <i class="zmdi zmdi-star"></i>
  <i class="zmdi zmdi-star-half"></i>
  </div>
  <span>(23)</span>
  </div>
  </div>
  </div>
  <!-- Single Product -->
  <div class="sin-pro">
  <!-- Product Image -->
  <div class="sin-pro-img-action fix">
  <a href="#" class="sin-pro-img"><img src="../img/product/2.jpg" alt="" /></a>
  <a href="#pro-quick-view" class="pro-quick-view" data-toggle="modal"><i class="zmdi zmdi-plus-circle-o"></i></a>
  <!-- Product Action -->
  <div class="sin-pro-action">
  <button class="pro-act-btn btn-icon"><i class="zmdi zmdi-refresh"></i></button>
  <button class="pro-act-btn btn-text">add to bag</button>
  <button class="pro-act-btn btn-icon"><i class="zmdi zmdi-favorite-outline"></i></button>
  </div>
  </div>
  <!-- Product Details -->
  <div class="sin-pro-details fix">
  <a class="sin-pro-title" href="#">Full sleev women shirt</a>
  <!-- Product Price -->
  <div class="sin-pro-price float-left">
  <span class="new">$ 85.00</span>
  </div>
  <!-- Product Ratting -->
  <div class="sin-pro-ratting float-right">
  <div class="rattings float-left">
  <i class="zmdi zmdi-star"></i>
  <i class="zmdi zmdi-star"></i>
  <i class="zmdi zmdi-star"></i>
  <i class="zmdi zmdi-star"></i>
  <i class="zmdi zmdi-star-half"></i>
  </div>
  <span>(23)</span>
  </div>
  </div>
  </div>
  <!-- Single Product -->
  <div class="sin-pro">
  <!-- Product Image -->
  <div class="sin-pro-img-action fix">
  <a href="#" class="sin-pro-img"><img src="../img/product/3.jpg" alt="" /></a>
  <a href="#pro-quick-view" class="pro-quick-view" data-toggle="modal"><i class="zmdi zmdi-plus-circle-o"></i></a>
  <!-- Product Action -->
  <div class="sin-pro-action">
  <button class="pro-act-btn btn-icon"><i class="zmdi zmdi-refresh"></i></button>
  <button class="pro-act-btn btn-text">add to bag</button>
  <button class="pro-act-btn btn-icon"><i class="zmdi zmdi-favorite-outline"></i></button>
  </div>
  </div>
  <!-- Product Details -->
  <div class="sin-pro-details fix">
  <a class="sin-pro-title" href="#">Full sleev women shirt</a>
  <!-- Product Price -->
  <div class="sin-pro-price float-left">
  <span class="new">$ 85.00</span>
  </div>
  <!-- Product Ratting -->
  <div class="sin-pro-ratting float-right">
  <div class="rattings float-left">
  <i class="zmdi zmdi-star"></i>
  <i class="zmdi zmdi-star"></i>
  <i class="zmdi zmdi-star"></i>
  <i class="zmdi zmdi-star"></i>
  <i class="zmdi zmdi-star-half"></i>
  </div>
  <span>(23)</span>
  </div>
  </div>
  </div>
  <!-- Single Product -->
  <div class="sin-pro">
  <!-- Product Image -->
  <div class="sin-pro-img-action fix">
  <a href="#" class="sin-pro-img"><img src="../img/product/4.jpg" alt="" /></a>
  <a href="#pro-quick-view" class="pro-quick-view" data-toggle="modal"><i class="zmdi zmdi-plus-circle-o"></i></a>
  <!-- Product Action -->
  <div class="sin-pro-action">
  <button class="pro-act-btn btn-icon"><i class="zmdi zmdi-refresh"></i></button>
  <button class="pro-act-btn btn-text">add to bag</button>
  <button class="pro-act-btn btn-icon"><i class="zmdi zmdi-favorite-outline"></i></button>
  </div>
  </div>
  <!-- Product Details -->
  <div class="sin-pro-details fix">
  <a class="sin-pro-title" href="#">Full sleev women shirt</a>
  <!-- Product Price -->
  <div class="sin-pro-price float-left">
  <span class="new">$ 85.00</span>
  </div>
  <!-- Product Ratting -->
  <div class="sin-pro-ratting float-right">
  <div class="rattings float-left">
  <i class="zmdi zmdi-star"></i>
  <i class="zmdi zmdi-star"></i>
  <i class="zmdi zmdi-star"></i>
  <i class="zmdi zmdi-star"></i>
  <i class="zmdi zmdi-star-half"></i>
  </div>
  <span>(23)</span>
  </div>
  </div>
  </div>
  <!-- Single Product -->
  <div class="sin-pro">
  <!-- Product Image -->
  <div class="sin-pro-img-action fix">
  <a href="#" class="sin-pro-img"><img src="../img/product/5.jpg" alt="" /></a>
  <a href="#pro-quick-view" class="pro-quick-view" data-toggle="modal"><i class="zmdi zmdi-plus-circle-o"></i></a>
  <!-- Product Action -->
  <div class="sin-pro-action">
  <button class="pro-act-btn btn-icon"><i class="zmdi zmdi-refresh"></i></button>
  <button class="pro-act-btn btn-text">add to bag</button>
  <button class="pro-act-btn btn-icon"><i class="zmdi zmdi-favorite-outline"></i></button>
  </div>
  </div>
  <!-- Product Details -->
  <div class="sin-pro-details fix">
  <a class="sin-pro-title" href="#">Full sleev women shirt</a>
  <!-- Product Price -->
  <div class="sin-pro-price float-left">
  <span class="new">$ 85.00</span>
  </div>
  <!-- Product Ratting -->
  <div class="sin-pro-ratting float-right">
  <div class="rattings float-left">
  <i class="zmdi zmdi-star"></i>
  <i class="zmdi zmdi-star"></i>
  <i class="zmdi zmdi-star"></i>
  <i class="zmdi zmdi-star"></i>
  <i class="zmdi zmdi-star-half"></i>
  </div>
  <span>(23)</span>
  </div>
  </div>
  </div>
</div>
		
	

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