Mon, 2015-07-13 14:36

OwlCarousel is a powerful jQuery powered slideshow that allows a developer huge strengths. A few being the tweakable options that come out of that box such as click to drag, navigational controls, animation styles and even responsive implementation. I've been using Owl Carousel myself as moving to a responsive world is a requirement now and being able to do this on the fly while designing saves an incredible amount of time as well as this script being one of the most powerful options are that freely available.

Let's head on over to http://drupal.org/project/owlcarousel

Here is the module that is available for us to download, for this tutorial we're using Drupal 7 so let's go ahead and download that one.

Now if you'll scroll backup you'll see that there are a few dependencies such as: Views, Variable and jQuery Update. Once you've downloaded these and installed them head on over for one more download at https://github.com/OwlFonk/OwlCarousel download to zip and place the "owl-carousel" folder into your sites/all/libraries folder.

Now let's head on over to our website to enable all of our modules.

Once all the modules are enabled we'll need to either already have a content type in mind that will contain the images for our slider or make a new content type that we can designate specifically for our slider.

Okay just to recap so far what we've done was setup owl carousel in the back-end with all the dependencies and now we're going to setup a new content type with an image field labeled "Slideshow Image" or if you've already created a content type just keep the image field name in mind.

Now we can head on over to our Owl Carousel config (/admin/config/user-interface/owlcarousel) and initiate the setup for our new slideshow by naming the preset and clicking add group.

These are the basic rules that our carousel will follow and since we're going for a full page responsive slider we can go ahead and actually ignore the the set of rules in which dictate how many items to display at said viewport size and instead we're going to tick the checkbox that reads "Single Item" this way the script knows what we're trying to do. Below are a few more options such as disabling the navigation (your next and previous buttons.) as well as a pagination. Once you're happy with your settings go ahead and click save configuration.

Now we're off to develop our view so let's head on over to our view sections and create a new block view for 'Content' and once inside let's set the the 'Format' to Owl Carousel and where it says "Options Set" choose the name you set for your owl carousel settings prior to setting up our view.

Once that is done we're going to go ahead down to the "Fields" section and add the name of our image field used in our new content type and fill out the required settings, once that's done the basics of your new slideshow are pretty much done, just head on over to your blocks section and place our new view block in the desired location and begin tweaking to your liking!

Written by
Anthony Marrero
Front-End Expert

A Florida native, Anthony is always living in the bleeding edge of modern design patterns and practices. He has built countless responsive and mobile websites using the latest technologies, and is our go to person for ensuring the finished product is pixel perfect on all devices. Outside of code he is an accomplished lyricist and musician.