Owl Carousel plugin - jQuery carousel slider with fully customizable and responsive | Apple Rinquest

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 websites, business websites,s and portfolio websites. 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.

Table of Contents

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 the 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 for 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 it on the webserver then you will see the slides as same as the screenshot below

For the slider, you can drag it to see the next and previous slide. Right now, it looks all green, and only the 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 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 are the options, I add to 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.

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 a 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;
}