Home » BLOG » WordPress » Owl Carousel plugin – jQuery carousel slider with fully customizable and responsive

Owl Carousel plugin – jQuery carousel slider with fully customizable and responsive

category:  WordPress, Web development
[Sassy_Social_Share] 5 min read

A carousel slider is another popular feature that you see often on the website. Often you will see the carousel feature on the travel agency website, e-commerce website, business website and portfolio website. There are so many slider plugins in the market but today we will talk about an Owl Carousel plugin which is one of the popular sliders in the market. The plugin can display the image and video.

Why use the Owl Carousel plugin?

  • Fully customizable
  • Touch and Drag support
  • Fully responsive
  • Modern browsers support
  • CSS2 fallback supported for older browser
  • Owl Carousel supports plugin modular structure which is very handy. You can detach plugins that you won’t use on your project or create new ones that fit your needs.

Download the plugin

  • Download the plugin from this link
  • Extract the downloaded file and navigate to dist folder
  • Inside the dist folder, you will see the js files and assets folder which contains the stylesheet and some image icons. We will use the js files and assets from the dist folder to our project.

Create our project

We will create an HTML file with the sample code in order to see how the plugin works and how to customize the plugin by using the options. Let’s start!

  • go to your webroot
  • create an index.html file and add the code below
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Owl Carousel Demo</title>

  <!-- include the owl-carousel stylesheet -->
  <link rel="stylesheet" href="assets/owl.carousel.min.css">
  <link rel="stylesheet" href="assets/owl.theme.default.min.css">

  <style>
    .owl-carousel .item {
      height: 10rem;
      background: #4DC7A0;
      padding: 1rem;
    }
  </style>
</head>

<body>

  <!-- setup the HTML for the slider -->
  <div class="owl-carousel owl-theme">
    <div class="item">
      <h4>1</h4>
    </div>
    <div class="item">
      <h4>2</h4>
    </div>
    <div class="item">
      <h4>3</h4>
    </div>
    <div class="item">
      <h4>4</h4>
    </div>
    <div class="item">
      <h4>5</h4>
    </div>
    <div class="item">
      <h4>6</h4>
    </div>
    <div class="item">
      <h4>7</h4>
    </div>
    <div class="item">
      <h4>8</h4>
    </div>
    <div class="item">
      <h4>9</h4>
    </div>
    <div class="item">
      <h4>10</h4>
    </div>
    <div class="item">
      <h4>11</h4>
    </div>
    <div class="item">
      <h4>12</h4>
    </div>
  </div>
</body>

<!-- include the owl-carousel javascript -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="owl.carousel.min.js"></script>

<!-- initialize the function -->
<script>
  $(document).ready(function () {
    $(".owl-carousel").owlCarousel();
  });
</script>

</html>
  • copy the js files and assets folder from the dist folder into your project root
  • now you will see your project root contains:
    • an assets folder (owl.carousel.css, owl.carouse.min.css, etc)
    • index.html
    • owl.carousel.js
    • owl.carouset.min.js
  • save the index.html file and run on webserver then you will see the slides as same as the screenshot below
owl slider 2
Owl carousel with a default setting

For the slider, you can drag to see the next and previous slide. Right now, it looks all green and only dots navigator showing. Next, we will add some options for customization.

Note that, in the production, you should use only the minified version of js and CSS files such as .min.js and .min.css in the HTML file for the loading performance reason. Just like the code above.

Customize the owl carousel plugin via options

You can find the online docs from here.

Let says, we want the slide moving after the page is loaded. Then we want to add the margin for each slide. Next, we want to add the prev and next buttons. Also, we want to add a responsive style to the slide. Below is the options, I add in the plugin.

<script>
  $(document).ready(function () {
    $(".owl-carousel").owlCarousel({
      loop: true,
      margin: 10,
      nav: true,
      navText: ["<div class='nav-btn prev-slide'>Prev</div>", "<div class='nav-btn next-slide'>Next</div>"],
      responsive: {
        0: {
          items: 1
        },
        600: {
          items: 3
        },
        1000: {
          items: 5
        }
      }
    });
  });
</script>

Here is the result after adding the code.

owl slider 3
Owl carousel with options setting

It is very easy and clean. The document is very well written. Plus, there is a very useful demo on the owl carousel website you can see the code and copy them to your project.

TIPS: how to change the prev and next button to be an arrow navigator and set the arrow for both sides of the slider

From the code above, you will add some code to customize the prev and next buttons to look nicer. Below is the updated code.

  • update the index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Owl Carousel Demo</title>

  <!-- include the owl-carousel stylesheet -->
  <link rel="stylesheet" href="assets/owl.carousel.min.css">
  <link rel="stylesheet" href="assets/owl.theme.default.min.css">

  <!-- include arrow navigator stylesheet -->
  <link rel="stylesheet" href="css/custom.css">

  <style>
    .owl-carousel .item {
      height: 10rem;
      background: #4DC7A0;
      padding: 1rem;
    }
  </style>
</head>

<body>

  <!-- setup the HTML for the slider -->
  <div class="video-wrapper">
    <div class="owl-carousel owl-theme">
      <div class="item">
        <h4>1</h4>
      </div>
      <div class="item">
        <h4>2</h4>
      </div>
      <div class="item">
        <h4>3</h4>
      </div>
      <div class="item">
        <h4>4</h4>
      </div>
      <div class="item">
        <h4>5</h4>
      </div>
      <div class="item">
        <h4>6</h4>
      </div>
      <div class="item">
        <h4>7</h4>
      </div>
      <div class="item">
        <h4>8</h4>
      </div>
      <div class="item">
        <h4>9</h4>
      </div>
      <div class="item">
        <h4>10</h4>
      </div>
      <div class="item">
        <h4>11</h4>
      </div>
      <div class="item">
        <h4>12</h4>
      </div>
    </div>
  </div>
</body>

<!-- include the owl-carousel javascript -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="owl.carousel.min.js"></script>

<!-- initialize the function -->
<script>
  $(document).ready(function () {
    $(".owl-carousel").owlCarousel({
      loop: true,
      margin: 10,
      nav: true,
      navText: ["<div class='nav-btn prev-slide'></div>", "<div class='nav-btn next-slide'></div>"],
      responsive: {
        0: {
          items: 1
        },
        600: {
          items: 3
        },
        1000: {
          items: 5
        }
      }
    });
  });
</script>

</html>
  • create a new “css” folder at the project root and new “custom.css” file in there then add the css code below into the “custom.css” file
.video-wrapper {
  position: relative;
}
.video-wrapper .owl-carousel .owl-nav {
  overflow: hidden;
  height: 0px;
}
.video-wrapper .owl-carousel .nav-btn {
  height: 100px;
  position: absolute;
  width: 50px;
  cursor: pointer;
  top: 100px !important;
}
.video-wrapper .owl-carousel .owl-prev.disabled,
.video-wrapper .owl-carousel .owl-next.disabled {
  pointer-events: none;
  opacity: 0.2;
}
.video-wrapper .owl-carousel .prev-slide {
  background: url(/img/nav-icon.png) no-repeat scroll 0 0;
  left: 5%;
  top: 20% !important;
}
.video-wrapper .owl-carousel .next-slide {
  background: url(/img/nav-icon.png) no-repeat scroll -50px 0px;
  right: 5%;
  top: 20% !important;
}

That’s it. Now you should see the screenshot below.

owl slider 4
Owl Carousel with the arrow navigator

Below is another screenshot that I implemented it for my client. It looks nice and clean design. Also, the slider displays well on the mobile.

owl slider 5
Owl carousel on the production