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

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:

• Chrome
• Firefox
• Opera
• IE7/8/10/11
• iPad Safari
• iPod4 Safari
• Nexus 7 Chrome
• Galaxy S4
• Nokia 8s Windows8

For more details take a look at the documentation.

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.

Here’s the required structure for our demo page:

It’s worth mentioning two things at this point:

1. The code above makes use of Bootstrap 4 classes. The Bootstrap framework isn’t vital; I included it only because I wanted to speed up the CSS development.
2. I added the background image of each slide through inline styles. Most of the time, when you’re dealing with dynamic content, this the most common CSS method for adding background images.

2. The CSS

With the HTML in place, let’s look at the CSS styles we’ll apply to our page. For simplicity, we’ll only discuss a part of the available styles.

First, we define two custom properties and two helper classes:

:root {
--main-white-color: white;
--main-black-color: black;
}
.static {
position: static; 
}
.cover {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

Next, we specify styles for the carousel slides, including the transitions:

.owl-carousel .owl-slide {
position: relative;
height: 100vh;
background-color: lightgray;
}
.owl-carousel .owl-slide-animated {
transform: translateX(20px);
opacity: 0;
visibility: hidden;
transition: all 0.05s;
}
.owl-carousel .owl-slide-animated.is-transitioned {
transform: none;
opacity: 1;
visibility: visible;
transition: all 0.5s;
}
.owl-carousel .owl-slide-title.is-transitioned {
transition-delay: 0.2s;
}
.owl-carousel .owl-slide-subtitle.is-transitioned {
transition-delay: 0.35s;
}
.owl-carousel .owl-slide-cta.is-transitioned {
transition-delay: 0.5s;
}

Finally, we set some rules for the navigation methods:

.owl-carousel .owl-dots,
.owl-carousel .owl-nav {
position: absolute;
}
.owl-carousel .owl-dots .owl-dot span {
background: transparent;
border: 1px solid var(--main-black-color);
transition: all 0.2s ease;
}
.owl-carousel .owl-dots .owl-dot:hover span,
.owl-carousel .owl-dots .owl-dot.active span {
background: var(--main-black-color);
}
.owl-carousel .owl-nav {
left: 50%;
top: 10%;
transform: translateX(-50%);
margin: 0;
}

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. 

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.

The code that fires the carousel is shown below:

const $owlCarousel = $(".owl-carousel").owlCarousel({
items: 1,
loop: true,
nav: true,
navText: [
'',
''
]
});

Adding Animations to Slide Elements

As a next step we animate the contents of each slide. This behavior is handled through the changed event that owl provides. 

Here’s the associated code:

$($owlCarousel).on("changed.owl.carousel", e => {
$(".owl-slide-animated").removeClass("is-transitioned");
const $currentOwlItem = $(".owl-item").eq(e.item.index);
$currentOwlItem.find(".owl-slide-animated").addClass("is-transitioned");
});

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.

Here’s the code related to this event:

/*you have to bind initialized event before owl's initialization (see demo) */
$(".owl-carousel").on("initialized.owl.carousel", () => {
setTimeout(() => {
$(".owl-item.active .owl-slide-animated").addClass("is-transitioned");
}, 200);
});

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.

In terms of code, the CSS rule needed is this one:

section {
display: none;
}

And the JavaScript code:

$(".owl-carousel").on("initialized.owl.carousel", () => {
setTimeout(() => {
// other code here
$("section").show();
}, 200);
});

Setting the Dots Position

The last thing we have to do is to position the dots navigation. By default, it’s absolutely positioned. The following things should happen:

1. It should be aligned horizontally with the .owl-slide-text element of the target slide. 
2. It should be positioned underneath that element with a 20px top gap.

The function that runs and sets the desired position for our dots is the setOwlDotsPosition.

Here’s that function:

function setOwlDotsPosition() {
const $target = $(".owl-item.active .owl-slide-text");
doDotsCalculations($target);
}

This isolates the .owl-slide-text element of the active slide and passes it as an argument to the doDotsCalculations  sub-function.

Here’s that sub-function:

function doDotsCalculations(el) {
const height = el.outerHeight();
const topPos = el.position().top;
const leftPos = el.position().left;
const res = height + topPos + 20;
$(".owl-carousel .owl-dots").css({
top: `${res}px`,
left: `${leftPos}px`
});
}

Inside this function we set the appropriate top and left values of the .owl-dots element based on the height and position of the target element. 

Catering for Browser Resize

Going a step further, the dots’ position should be updated as we resize the browser window. To achieve this, we take advantage of the resize owl event.

Here’s the necessary code:

$($owlCarousel).on("resize.owl.carousel", () => {
setTimeout(() => {
setOwlDotsPosition();
}, 50);
});

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.

Here’s the related code:

$($owlCarousel).on("changed.owl.carousel", e => { 
// other code here
const $currentOwlItem = $(".owl-item").eq(e.item.index);
const $target = $currentOwlItem.find(".owl-slide-text");
doDotsCalculations($target);
});

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 and a 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.