Wednesday, 28 August 2013

Design a Touch-Enabled Content Rotator with Owl Carousel

I recently came across a new interesting jQuery plugin named Owl Carousel. It is a touch-enabled image slider that allows users to drag over the items. But it doesn’t just hold images, you can put any type of HTML content into the slider. This is one of the easiest plugins I have found which also greatly extends functionality into mobile devices.
For this tutorial I want to demonstrate how we can implement a simple content rotator using Owl Carousel. I will be using a set of image shots from Dribbble which are contained inside the rotator slides. There are many options you can set for increased performance or to enhance the interface with navigation. Check out my live sample demo to get an idea of the final product.


Getting Started

The first step is to download a copy of jQuery from the most recent release. The compressed minified production version is best for our needs. Also we need to download a copy of Owl Carousel which you can get right from the Github repo. Inside there are numerous files we need to include so let’s take a peek at my document header.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Touch-Enabled Content Rotator - Template Monster Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://images.templatemonster.com/images/favicon.ico">
  <link rel="icon" href="http://images.templatemonster.com/images/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/style.css">
  <link rel="stylesheet" type="text/css" media="all" href="css/owl.carousel.css">
  <link rel="stylesheet" type="text/css" media="all" href="css/owl.theme.css">
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" src="js/owl.carousel.min.js"></script>
</head>
The initial stylesheet named style.css is what I created for the page layout. Owl Carousel will come with two specific stylesheets called owl.theme.css and owl.carousel.css. They are both necessary for styling the basic default plugin container. Please note we also need a copy of owl.carousel.min.js which should be kept alongside the jQuery script.
Aside from these dependencies we really just need a bit of jQuery code to get it all working. The file sizes are reasonable and the function itself does not take very long to initialize. Let’s take a look at how to setup the content sections for this slider effect to work properly.

Owl Slider Content

Each slide in the carousel is contained within a div element. jQuery uses this div to extract a container, then applies internal classes or similar attributes to another div. The best approach is to create a single container with the ID we target in jQuery, then create a number of smaller divs with the internal content.
1
2
3
4
5
6
7
8
9
10

<div id="owlimgslider" class="owl-carousel">
      <div><img src="img/desktop-workspace.jpg"></div>
      <div><img src="img/rocket-ship.jpg"></div>
      <div><img src="img/txtbooks.jpg"></div>
      <div><img src="img/autumn-sunset.jpg"></div>
      <div><img src="img/responsive-blog.jpg"></div>
      <div><img src="img/3d-ios7-apps.jpg"></div>
      <div><img src="img/dribbble-debut.jpg"></div>
      <div><img src="img/madrid-spain.jpg"></div>
    </div>
My example is very basic only containing a single image within the div slides. But keep in mind that you can write practically anything into these divs which can be rendered into HTML/CSS. This could utilize CSS3 animation effects, Flash content, really anything that looks good.
I like the idea of combining headers, paragraphs, and text along with images or icons. This can be used on a product homepage showcasing features or customer testimonials. Take a look at the sample HTML used on the Owl demo page.
1
2
3
4
5
6
7
8
9
10
11
12

<div id="owl-example" class="owl-carousel">
  <div class="item darkCyan">
    <img src="assets/img/demo-slides/touch.png" alt="Touch">
    <h3>Touch</h3>
    <h4>Can touch this</h4>
  </div>
  <div class="item forestGreen">
    <img src="assets/img/demo-slides/grab.png" alt="Grab">
    <h3>Grab</h3>
    <h4>Can grab this</h4>
  </div>
</div>

CSS Styles

Inside the default owl.theme.css you can find a lot of different properties which are easy to manipulate. This is one of the only main core files which you should feel okay to play around with. The function call itself does support a theme parameter where you can update the default theme CSS file, so it’s not difficult to customize.
However it is recommended to copy/paste the contents into a new stylesheet if you want to mess with the defaults. This way you can easily revert back if things are not working after making changes.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

/* Styling Next and Prev buttons */
 
.owl-theme .owl-controlls .owl-buttons div{
 color: #FFF;
 display: inline-block;
 zoom: 1;
 *display: inline;/*IE7 life-saver */
 margin: 5px;
 padding: 3px 10px;
 font-size: 12px;
 -webkit-border-radius: 30px;
 -moz-border-radius: 30px;
 border-radius: 30px;
 background: #869791;
 opacity: 0.5;
}
/* Clickable class fix problem with hover on touch devices */
/* Use it for non-touch hover action */
.owl-theme .owl-controlls.clickable .owl-buttons div:hover{
 opacity: 1;
 text-decoration: none;
}
A lot of the styles are basic resets and positioning for elements in the carousel. There are not many colors or styles which add pizzazz into the layout. This is obviously editable with some work, however take note of the many browser fixes which are included. These are crucial for the carousel to run properly.
I did not include many extra styles aside from the page layout and CSS resets. You can take a peek at my style.css if you want to use some of these codes in another website. But the concepts are all common frontend ideas which shouldn’t take long to understand.

Running Owl with jQuery

The final step to this whole puzzle is running a small bit of jQuery to get the Owl Carousel plugin working. We need to target the outer div container and initialize the main function call. There are a lot of parameters you can pass into this function to manipulate the output. However all I have defined are the total number of shots to display in fullview.
1
2
3

$(function(){
  $('#owlimgslider').owlCarousel({items:3});
});
The code is written compact so as to save room on the page. We can use the internal curly braces to wrap a number of alternative options within the function call. Owl has been created to allow for a lot of different options – many of which you probably will not need. But I want to present a small template which can also be found in the plugin documentation. This is a good place to start by copying the parameters you need and deleting the extra ones.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

$(function(){
  $("#owlimgslider").owlCarousel({
 
    //Basic Speeds
    slideSpeed : 300,
    paginationSpeed : 650,
 
    //Autoplay
    autoPlay : true,
    goToFirst : true,
    goToFirstSpeed : 1000,
 
    // Navigation
    navigation : true,
    navigationText : ["prev","next"],
    pagination : true,
    paginationNumbers: true,
 
    // Responsive 
    responsive: true,
    items : 5,
    itemsDesktop : [1199,4],
    itemsDesktopSmall : [980,3],
    itemsTablet: [768,2],
    itemsMobile : [479,1],
 
    // CSS Styles
    baseClass : "owl-carousel",
    theme : "owl-theme"
  });
});
jQuery takes a bit of practice getting used to the syntax. But everything is pretty easy to understand once you have worked with a few plugins. Owl Carousel is one of the best solutions I have found to incorporate mobile support. I would highly recommend this for anyone who needs a content slider on their responsive website layout.


Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)