Create the best slider using Owl Slider.

In this blog, I have show you how you can create a slider using Owl Slider and jQuery.

This slider can be used at multiple places

  • Product Slider
  • Home Page Slider
  • Image Slider

Copy the below code and implement on your project.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      src="https://code.jquery.com/jquery-2.2.4.min.js"
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
      crossorigin="anonymous"
    ></script>
    <script src="owlcarousel/owl.carousel.min.js"></script>
    <link rel="stylesheet" href="owlcarousel/assets/owl.carousel.min.css" />
    <link
      rel="stylesheet"
      href="owlcarousel/assets/owl.theme.default.min.css"
    />
    <title>Document</title>
  </head>
  <body>
    <h1>hello</h1>

    <!-- Set up your HTML -->
    <div class="owl-carousel owl-theme">
      <div class="item">
        <img alt="1" src="./images/1.jpg" width="100px" />
      </div>
      <div class="item">
        <img alt="2" src="./images/2.jpg" width="100px" />
      </div>
      <div class="item">
        <img alt="3" src="./images/3.jpg" width="100px" />
      </div>
      <div class="item">
        <img alt="4" src="./images/4.jpg" width="100px" />
      </div>
      <div class="item">
        <img alt="5" src="./images/5.jpg" width="100px" />
      </div>
      <div class="item">
        <img alt="6" src="./images/6.jpg" />
      </div>
      <div class="item">
        <img alt="7" src="./images/7.jpg" />
      </div>
    </div>

    <script>
      $(document).ready(function () {
        console.log("own ready");
        $(".owl-carousel").owlCarousel({
          autoplay: true,
          autoplayTimeout: 3000,
          autoplayHoverPause: false,
          loop: false,
          dots: true,
          dotsEach: true,
          dotsData: true,
          dotsContainer: true,
          rewind: false,
          nav: true,
          margin: 10,
          // autoWidth: true,
          items: 4,
          responsiveClass: true,
          responsive: {
            0: {
              items: 1,
            },
            350: {
              items: 2,
            },
            600: {
              items: 4,
            },
            1000: {
              items: 5,
            },
          },
        });

        $(".owl-carousel").click(".owl-next", function () {
          console.log("dots end");
          $(".own-next .disabled").css("display:none!important");
        });
      });
    </script>
  </body>
</html>

Hope this article helped.

If yes, please share with your friends and needy.

Help Others

Himanshu Shekhar

Hey. I am a software engineer with 3+ years. Along with my job, I create content regarding coding and software engineering in general. I would request you to follow my blog and my video, which will help you in your software engineering journey. Follow me on Youtube →
View All Articles

Leave a Reply

Your email address will not be published.