Arty - Sliders

Single Item Slider


<div class="owl-carousel" data-owl-items="1">
  <div>
    <img src="../assets/images/col-2.jpg" alt="">
  </div>
  <div>
    <img src="../assets/images/col-2.jpg" alt="">
  </div>
  <div>
    <img src="../assets/images/col-2.jpg" alt="">
  </div>
</div>

Responsive Slider


<div class="owl-carousel" data-owl-nav="true" data-owl-margin="10" data-owl-xs="1" data-owl-sm="1" data-owl-md="2" data-owl-lg="3" data-owl-xl="3">
  <div>
    <img src="../assets/images/col-2.jpg" alt="">
  </div>
  <div>
    <img src="../assets/images/col-2.jpg" alt="">
  </div>
  <div>
    <img src="../assets/images/col-2.jpg" alt="">
  </div>
  <div>
    <img src="../assets/images/col-2.jpg" alt="">
  </div>
  <div>
    <img src="../assets/images/col-2.jpg" alt="">
  </div>
</div>

Owl Dots Overlay


<!-- Owl Dots Overlay -->
<div class="owl-carousel owl-dots-overlay" data-owl-items="1">
  <div>
    <img src="../assets/images/col-2.jpg" alt="">
  </div>
  <div>
    <img src="../assets/images/col-2.jpg" alt="">
  </div>
  <div>
    <img src="../assets/images/col-2.jpg" alt="">
  </div>
</div>

Owl Dots Overlap


<!-- Overlap left -->
<div class="owl-carousel owl-dots-overlap-left" data-owl-items="1">
  <div>
    <img src="../assets/images/col-2.jpg" alt="">
  </div>
  <div>
    <img src="../assets/images/col-2.jpg" alt="">
  </div>
  <div>
    <img src="../assets/images/col-2.jpg" alt="">
  </div>
</div>
<!-- Overlap center -->
<div class="owl-carousel owl-dots-overlap" data-owl-items="1">
  <div>
    <img src="../assets/images/col-2.jpg" alt="">
  </div>
  <div>
    <img src="../assets/images/col-2.jpg" alt="">
  </div>
  <div>
    <img src="../assets/images/col-2.jpg" alt="">
  </div>
</div>
<!-- Overlap right -->
<div class="owl-carousel owl-dots-overlap-right" data-owl-items="1">
  <div>
    <img src="../assets/images/col-2.jpg" alt="">
  </div>
  <div>
    <img src="../assets/images/col-2.jpg" alt="">
  </div>
  <div>
    <img src="../assets/images/col-2.jpg" alt="">
  </div>
</div>

Owl Nav Overlay


<!-- Owl Nav Overlay -->
<div class="owl-carousel owl-nav-overlay" data-owl-nav="true" data-owl-dots="false" data-owl-items="1">
  <div>
    <img src="../assets/images/col-2.jpg" alt="">
  </div>
  <div>
    <img src="../assets/images/col-2.jpg" alt="">
  </div>
  <div>
    <img src="../assets/images/col-2.jpg" alt="">
  </div>
</div>

Owl Nav Overlap


<!-- Overlap left -->
<div class="owl-carousel owl-nav-overlap-left" data-owl-nav="true" data-owl-dots="false" data-owl-items="1">
  <div>
    <img src="../assets/images/col-2.jpg" alt="">
  </div>
  <div>
    <img src="../assets/images/col-2.jpg" alt="">
  </div>
  <div>
    <img src="../assets/images/col-2.jpg" alt="">
  </div>
</div>
<!-- Overlap center -->
<div class="owl-carousel owl-nav-overlap" data-owl-nav="true" data-owl-dots="false" data-owl-items="1">
  <div>
    <img src="../assets/images/col-2.jpg" alt="">
  </div>
  <div>
    <img src="../assets/images/col-2.jpg" alt="">
  </div>
  <div>
    <img src="../assets/images/col-2.jpg" alt="">
  </div>
</div>
<!-- Overlap right -->
<div class="owl-carousel owl-nav-overlap-right" data-owl-nav="true" data-owl-dots="false" data-owl-items="1">
  <div>
    <img src="../assets/images/col-2.jpg" alt="">
  </div>
  <div>
    <img src="../assets/images/col-2.jpg" alt="">
  </div>
  <div>
    <img src="../assets/images/col-2.jpg" alt="">
  </div>
</div>