In this tech note I document how I got Owl Carousel working with the Sage starter theme. A reasonable level of technical knowledge is assumed. Basically, I’m assuming you understand the build tools used with Sage: bower, gulp, etc. and how Sage fits together. If that’s not you then you probably need to have a go with Sage first.

As has been mentioned in previous tech notes, I’m using the Sage starter theme in my work at the moment, and it’s throwing up a few challenges. Partly in how it’s made, but partly just with me getting used to the tooling and environment around Sage.

I do a lot of work for organisations that have partners or sponsors, and we often have to create logo carousels. One of my team’s favoured libraries for logo sliders is Owl Carousel. And, having got it working, I’ve come to like it as it handles a lot of complexity for me.

But it did take a bit of work to integrate it nicely with Sage.

To be clear, there are two versions of Owl Carousel. I got the beta version 2.0 partly-working, but my completed solution is using the current build of v1.3.2.

Understanding Owl

The first thing to know is the high-level of what Owl does. It lets you take a set of elements and create a carousel from them. It does not do anything with the content of your elements, so you need to do any styling, horizontal or vertical centering, and responsive content yourself. Yes, Owl does work responsively (and it’s really nice) but if your content inside the boxes that Owl creates is not responsive then it won’t work.

So you do have to do some of the leg work yourself. I’ll come back to this.

Installing with Bower

Sage uses Bower for front-end package management. So the first thing you have to do is install the Owl component to your project.

If you do

bower search owlcarousel

You’ll get back a list of bower components that might be what you need. A lot of these are the same thing with different names. I want the original OwlCarousel 1.3 component, and I want to save it to my bower.json (so other people can build it into the project). So do:

bower install –save owlcarousel

This fetches the component into the bower_components directory

What no main?

Normally including something with bower would make Gulp automatically recognise that this component exists. However, this seems to be dependent on the bower package that you installed having a “main” section in its bower.json file. The owl-carousel package didn’t have this, so I needed to add some overrides to my project’s global bower.json file. You’ll need to add the following code to any existing overrides that you have:

"overrides": {
  "owl-carousel": {
    "main": [
      "./owl-carousel/owl.carousel.js",
      "./owl-carousel/owl.carousel.css",
      "./owl-carousel/owl.theme.css",
      "./owl-carousel/owl.transitions.css"
    ]
  }
}

Compiling into the project

Adding the overrides to bower.json doesn’t actually compile and concatenate the component into your project. To do this you need to update the dependencies in the project’s manifest.json. Again you’ll need to merge this in to whatever you already have, but mine now looks something like this:

"dependencies": {
  "main.js": {
    "files": [
      "scripts/main.js"
    ],
    "bower": [
      "owl-carousel"
    ],
    "main": true
  },
  "main.css": {
    "files": [
      "styles/main.scss"
    ],
    "bower": [
      "owl-carousel"
    ],
    "main": true
  },
  "customizer.js": {
    "files": [
      "scripts/customizer.js"
    ]
  },
  "jquery.js": {
    "bower": ["jquery"]
  }
},

With this all done you should have Owl Carousel compiled into your project.

You’ll then need to create some markup. This is pretty easy to do, but note that Owl only gives you the basic ability to construct a slider from blocks – in version 1 at least! You’ll need to create the structure and styling for the blocks yourself. I, in particular, wanted responsive, horizontally and vertically-centered images, which needed a little work to achieve. Here’s my markup being generated:

    <div class="owl-carousel owl-theme">
        <?php
            $logos = get_posts([
                'post_type' => 'logo',
                'posts_per_page' => -1,
            ]);
            foreach ($logos as $this_logo) {
                echo '<div class="logo-outer"><div class="logo-container">';
                echo get_the_post_thumbnail( $this_logo, 'medium', ['class' => 'img-responsive']);
                echo '</div></div>';
            }
        ?>
    </div>
</div>

Notes:

  • I’m using Bootstrap so I’ve got Bootstrap columns and the img-responsive class gets me my fluid images.
  • I’m pulling my logos from a custom type called ‘logo’.
  • I’ve had to put a container around the logo to get my centering to work. Annoying, but necessary.

Doing it with style

Here’s my (SASS) styles that get applied to the markup:

// Some additional owl-carousel styles
.owl-item {
  height: 100px;
  padding: 0 12px;

  .logo-outer {
    position: relative;
    height: 100px;
    padding: 30px 12px;
    background-color: #FFF;
  }

  .logo-container {
    height: 40px;
    position: relative;
  }

  img {
    position: absolute;
    max-width: 100%;
    max-height: 40px;
    height: auto;
    width: auto;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
  }

You’ll have to tweak heights, widths, paddings, colours, etc.  The key thing is the top, left and transform trick to center the logos inside the fixed-height containers. You could probably add some variables and calculations to this to make it more DRY. But I didn’t…yet.

The final touch: JavaScript to turn it all on

Finally, you’ll need to add some JS to apply Owl to your markup. Mine is in the Sage.home.finalize function in main.js and looks like this:

// Home page
'home': {
  init: function() {
    // JavaScript to be fired on the home page
  },
  finalize: function() {
    // JavaScript to be fired on the home page, after the init JS
    $('.logos-slider .owl-carousel').owlCarousel({
        items: 4,
        pagination: false,
        navigation: true,
        scrollPerPage: true
    });
  }
},

Once all that is done, you may need to apply some CSS magic to the previous and next controls, but you’ll have a lovely, responsive slider in place.

 

Photo of full-width Owl Carousel

Full-width – the slider removes the pagination arrows as there’s not paging to do!

Photo of Owl Carousel at medium width

At a sort-of-table width, we reduce to three logos and the pagination appears.

Photo of Owl Carousel at mobile width

At mobile width we get a full-width single logo. Nice.

I hope that helped someone other than me and my team.