Sliders

Single Item Slider


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

Responsive Slider


<div class="owl-carousel" data-owl-nav="true" data-owl-dots="false" 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/img-1.jpg" alt="">
  </div>
  <div>
    <img src="../assets/images/img-2.jpg" alt="">
  </div>
  <div>
    <img src="../assets/images/img-3.jpg" alt="">
  </div>
  <div>
    <img src="../assets/images/img-4.jpg" alt="">
  </div>
</div>

Owl Nav - Overlay


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

Owl Nav - Overlap


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

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

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

Owl Dots - Overlay


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

Owl Dots - Overlap


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

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

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

Sliding Text

Best Rated HTML Template

The Ultimate Multipurpose Template


<div class="swiper sliding-text">
  <div class="swiper-wrapper">
    <!-- Item 1 -->
    <div class="swiper-slide">
      <h2 class="display-1 fw-semi-bold uppercase stroke-text mb-0 opacity-25">Best Rated HTML Template</h2>
    </div>
    <!-- Item 2 -->
    <div class="swiper-slide">
      <h2 class="display-1 fw-semi-bold uppercase text-color-theme mb-0 opacity-10">The Ultimate Multipurpose Template</h2>
    </div>
  </div>
</div>