Owl Carousel

This article will provide an outline of how to setup and configure Owl Carousel for Drupal. Owl Carousel is a feature rich responsive slider built by OwlFonk. The module provides integration with Views and Fields via a custom formatter. Additionally sub-modules such as Owl Carousel Colorbox provide extended functionality.

Installation

1.x

  • Download & install the Owl Carousel module.
  • Download & install any prerequisite modules, LibrariesVariable & jQuery Update.
  • Download the Owl Carousel library (1.x).
  • Copy the Owl Carousel library to the following directory sites\all\libraries\owl-carousel
  • E.G. sites\all\libraries\owl-carousel\owl.carousel.js

2.x

  • Download the Owl Carousel library (2.x).
  • Copy the Owl Carousel library to the following directory sites\all\libraries\owlcarousel
  • E.G. sites\all\libraries\owlcarousel\owl.carousel.js

Configuration

  • The Owl Carousel settings live under admin/config/user-interface/owlcarousel.
  • Settings are defined as variable groups.
  • Each setting group may be applied to any number of carousel instances.

Owl Carousel provides two sub-modules; Owl Carousel Views and Owl Carousel Fields. The Views sub-module provides a format style which can be selected when creating or updating a View. The Fields sub-module provides a field formatter which can be selected via the content type, manage display page.

Render Owl Carousel manually

The Owl Carousel module provides a number of theme functions which can be used to manually render out the carousel. This is handy for custom implementation methods as it allows the setting groups to still be content managed.


  $items = array(
    array('row' => 'element to render')
    array('row' => 'second element to render')
  );

  $output = array(
    '#theme' => 'owlcarousel',
    '#items' => $items,
    '#settings' => array(
      // The settings group to apply.
      'instance' => 'owlcarousel_settings_default',
      // Attributes are rendered via drupal_attributes on the wrapper element.
      'attributes' => array(
        'class' => array('owl-carousel')
      )
    )
  );

  return drupal_render($output);

API

The Owl Carousel module provides two key alter functions. The first allows access to alter settings by their identifier before render.


/**
 * Implements hook_owlcarousel_settings_alter().
 *
 * @param array
 *   Settings array to apply.
 * @param string
 *   Settings group identifier.
 */
function hook_owlcarousel_settings_alter(&$settings, $instance) {
  switch ($instance) {
    case 'owlcarousel_settings_default':
      // Update the number of items displayed
      $settings['items'] = 2;
      break;
  }
}

The second hook allows access to alter the entire renderable array before processing.


/**
 * Implements hook_owlcarousel_pre_render_alter().
 *
 * @element array
 *   Element renderable array.
 */
function hook_owlcarousel_pre_render_alter(&$element) {
  // Push an additional item onto the carousel.
  $element['#markup']['#output']['#items'][] = array(
    'row' => 'Imagine some HTML here'
  );
}

Extending with custom callbacks

Owl Carousel provides the ability to extend default functionality with custom callbacks. Due to JavaScript scope these are difficult to content manage. We can however merge what we need into the existing settings from our own JavaScript file; called before Owl Carousel is initiated. 


/**
 * @file
 * my_javascript_file.js
 */

(function($) {

  Drupal.behaviors.my_javascript_file = {
    attach : function(context, settings) {
      var callbacks = {afterInit: afterOWLinit};

      for (var carousel in settings.owlcarousel) {
        if (carousel == 'name_of_carousel') {
          $.extend(true, settings.owlcarousel[carousel].settings, callbacks);
        }
      }
    }
  };

  function afterOWLinit() {
    // called after init.
  }
}(jQuery));


Path
owlcarousel