How to Build a Full-Screen Responsive Carousel Slider With Owl.js

In a previous post I showed you how to build a custom image gallery with slick.js. Today I’ll cover the process of creating an animated, responsive, full-screen carousel slider with owl.js (or “Owl Carousel”)

As usual, to get an initial idea of what we’ll be building, take a look at the related CodePen demo (check out the larger version for a better experience):

What is Owl Carousel?

Owl.js is a popular jQuery plugin created by David Deutch that lets you build attractive, responsive carousels. To better understand what this plugin can offer you, check out the demos.

Happily enough, it has great browser support, having been tested on the following devices:

Getting Started With Owl.js

To get started with owl, begin by downloading and installing the following files in your project:

jQuery

owl.carousel.css or its minified version

owl.carousel.js or its minified version

Optionally, you might want to import the owl.theme.default.css file.

You can grab a copy of the corresponding owl files by visiting its Github repo, by using a package manager (e.g. npm), or by loading the necessary assets through a CDN (e.g. cdnjs). For this tutorial, I’ll choose the last option.

For the purposes of this tutorial, beyond the owl files, I’ve also incorporated Babel and Bootstrap 4.

With that in mind, if you look under the Settings tab of our demo pen, you’ll see that I’ve included three external CSS files and two external JavaScript files.

1. The HTML

To kick things off we define a carousel which has three slides. Each of those slides contains a title, a subtitle, and a call-to-action button.

Note: The slides should cover the full window height and we therefore give them height: 100vh. However, as this unit is inconsistent across some devices (e.g. iOS devices), another option is to set the slides’ height through JavaScript (see the JavaScript panel of the demo for more info).

3. The JavaScript

At this point we’re ready to turn our attention to the JavaScript.

Initializing the Carousel

As a first step, we’ll initialize the carousel. By default the plugin provides “dots navigation”, but our carousel will also include navigation arrows.

Owl navigation options

We enable the navigation option though the nav configuration property. In addition, we define some custom SVGs as arrows thanks to the navText configuration property.

So each time we visit a new slide, firstly the contents of all the slides disappear. Then, the contents of the current slide appear with a nice slide-in animation .

Note: instead of the changed event we could have equally used the translated event.

So far, we’ve seen how the animations are fired as we cycle through the slides. But we also want that kind of animation when the carousel initially loads. To implement this functionality, we’ll use the initialized event.

Inside that event we add add the is-transitioned class to the elements of the first slide.

It’s important to note that this event must be attached before carousel’s initialization.

Preventing the Page Jump on Load

Before moving on, let’s cover one tricky thing. If you look at the demo page, you’ll see that there’s a section element defined below the carousel. By default, until the carousel loads, the section contents appear and a small jump happens in our page.

There are two ways to fix this unwanted behavior. First, we can add a preloader (we already did that in the slick-related tutorial). A second option which we’ll implement here is to hide the section and show it as soon as the carousel is initialized.

Positioning Depending on Contents

Last but not least, as we navigate through the slides the dots have to be repositioned depending on the height and position of the contents of the active slide. Thanks to the changed event again, we’re able to solve that new requirement.

Pro Tip

Before closing, let’s discuss one common owl bug. If we remove the section which sits underneath the carousel, the vertical scrollbar disappears anda part of the adjacent slide appears.

To fix this, we trigger the refresh event after the carousel initialization, like this: $($owlCarousel).trigger("refresh.owl.carousel");

4. Browser Support

The demo should work well in all recent browsers and you can safely use it in your projects. Here’s a reminder of what we’ve built:

Conclusion

In this thorough tutorial, we managed to build an animated full-screen carousel slider with owl.js. Hopefully you’ll have gained some new skills which you’ll be able to put into practice in your upcoming projects. As always, if you have any questions, let me know in the comments below.