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 slider with owl.js (or “Owl Carousel”).

serverpoint hosting banner

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.

CSS Settings on Codepen
JavaScript settings on CodePen

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:

You might also like More from author

Leave A Reply

Your email address will not be published.