owl carousel with javascript does not work

  carousel, css, html, javascript, owl-carousel

can you tell me what the problem is that it does not work properly? it is a owl carousel with five image and i add some javascript code but it is not working as well. i add owl.carousel.min.js
and jquery library but raly i dont know what the problem is.

https://codepen.io/lenar1996/pen/NWdwbrQ


<div class="sliders owl-carousel">
  <div class="card">
    <div class="img"><img src="https://www.itaf.eu/wp-content/uploads/2020/04/best-laptops-cover.jpg" alt=""></div>
    <div class="content">
      <div class="title">briana tazor</div>
      <div class="sub-title">graphic designer</div>
      <div class="btn">
        <button>read more</button>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="img"><img src="https://www.itaf.eu/wp-content/uploads/2020/04/best-laptops-cover.jpg" alt=""></div>
    <div class="content">
      <div class="title">briana tazor</div>
      <div class="sub-title">graphic designer</div>
      <div class="btn">
        <button>read more</button>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="img"><img src="https://www.itaf.eu/wp-content/uploads/2020/04/best-laptops-cover.jpg" alt=""></div>
    <div class="content">
      <div class="title">briana tazor</div>
      <div class="sub-title">graphic designer</div>
      
      <div class="btn">
        <button>read more</button>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="img"><img src="https://www.itaf.eu/wp-content/uploads/2020/04/best-laptops-cover.jpg" alt=""></div>
    <div class="content">
      <div class="title">briana tazor</div>
      <div class="sub-title">graphic designer</div>
      
      <div class="btn">
        <button>read more</button>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="img"><img src="https://www.itaf.eu/wp-content/uploads/2020/04/best-laptops-cover.jpg" alt=""></div>
    <div class="content">
      <div class="title">briana tazor</div>
      <div class="sub-title">graphic designer</div>
      
      <div class="btn">
        <button>read more</button>
      </div>
    </div>
  </div>
</div>

and it is my javascript code

<script>
  $(".sliders").owlCarousel({
    loop: true,
    autoplay: true,
    autoplayTimeout: 2000,
    autoplayHoverPause: true,
  });
</script>

Source: Ask Javascript Questions

LEAVE A COMMENT