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">
    <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="owlcarousel/owl.carousel.min.js"></script>
    <link rel="stylesheet" href="owlcarousel/assets/owl.carousel.min.css" />

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

      $(document).ready(function () {
        console.log("own ready");
          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");

Hope this article helped.

If yes, please share with your friends and needy.

Help Others

Leave a Reply

Your email address will not be published. Required fields are marked *