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,        },    }})