產品滑桿

		
<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.webp" 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.webp" 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.webp" 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.webp" 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.webp" 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,
        },
    }
})