Owl Carousel tutorial for Drupal

Submitted by admin on Wed, 02/14/2018 - 18:19
Owl Carousel tutorial for Drupal

Drupal offers a few good image slider modules for Drupal 7.  Many of these are out of the box solutions such as Nivo Slider which means after you’ve installed them your essentially good to go in terms of getting your sliders up and running in no time.

Whilst there is certainly a place for out of the box options, sometimes you need something with a bit more flexibility and customisation.  Also, a lot of Drupal templates will come with a slider on the front page only so even if you change the configuration to display on other pages it will not work.

In these cases, a custom solution is what is called for.  In this tutorial I will show you how to create custom image sliders with the Owl Carousel module.

This tutorial assumes that you have the following modules installed and enabled on your Drupal site:

This tutorial assumes you have a basic grasp of the Views module.

Owl Carousel

Owl Carousel is a modern responsive slider with the following features:

  • Responsive
  • Touch Events
  • Mouse Slide Events
  • Fully Customizable
  • Choose the number of items to be displayed
  • Multiple Sliders
  • CSS3 3d Transitions
  • Custimizable controls
  • JSON
  • Custom events
  • Helpful callbacks

Installation

1. Download & install the Owl Carousel module (Views, Variable and jQuery modules required).

Creative Eighty - [node:title]

2. Download the Owl Carousel library (we’re using version 1.x).

3. Copy the Owl Carousel library to the following directory sites\all\libraries\owl-carousel so that the path is sites\all\libraries\owl-carousel\owl.carousel.js

CreativeEighty Tutorial - Owl Carouse

Configuration

1. The first thing to do is to visit the module configuration page to set your slider settings (/admin/config/user-interface/owlcarousel).

2. Give your settings a name/description in the name text field and then click on Add group. Your new settings will appear on the side bar and if you click on it you will see the carousel’s default settings.  These can be changed and amended to your individual needs.

CreativeEighty Tutorial - Owl Carouse

CreativeEighty Tutorial - Owl Carouse

Usage

1. The first thing to do is to create a new content type. Since this tutorial is about image sliders you will have to add an image field to your new content type. At this stage it is not necessary to make any configuration changes to the image field.

2. Next you should add some content to the new content type you’ve just created.

3. Once you have a few pages of content, head over to the views module (/admin/structure/views).

4. Add a new view of the content of your slider content type. I prefer unsorted content. Untick the “Create a page” box but do tick the “Create a block” box. Give your block a title and make sure you select Owl Carousel in the display format box of fields.  You can set the number of images in your slider in the “Items per page” box.

5. Continue and edit.

6. The first thing to do is to click on Settings under FORMAT so that you can select your desired configuration for the slider.

CreativeEighty Tutorial - Owl Carouse

7. Now add your slider image field that you created when you created your new content type. To do this, select Add in the FIELDS sections and find your image field.

8. Once you have selected your image field, you have to configure it on the next screen. You don’t need a label so untick the “Create a label” box.

CreativeEighty Tutorial - Owl Carouse

9. In the Formatter drop down select Owl Carousel and under Settings Group your slider settings that you setup before (see 6).  Click on Apply.

CreativeEighty Tutorial - Owl Carouse

10. If you do not want a title to appear above your slider, click on Title link under FIELDS and then remove.

11. Save your view and that’s it.  You can now go over to blocks (/admin/structure/block) to add you new slider to any section of your website.