Design a Touch-Enabled Content Rotator with Owl Carousel

25 March 2018 Jake Rocheleau

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.

Live Demo - Download Source Code

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.

&lt;!doctype html&gt;
 
  Touch-Enabled Content Rotator - Template Monster Demo
 
 
 
 
 
 
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><script type="text/javascript" src="js/owl.carousel.min.js"></script>

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.

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.

Touch

Can touch this

Grab

Can grab this

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.

/* 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.

$(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.

Live Demo - Download Source Code

Final Thoughts

With the popularity of mobile-responsive templates and retina devices you can never be too conscientious with dynamic content. The Owl Carousel plugin is a fantastic example of extending your website's functionality while also catering to mobile users. Touch-enabled interfaces are becoming the way of the future. Also feel free to download a copy of my source codes and tinker around with the various slider effects.

Don’t miss out these all-time favourites

The best hosting for a WordPress website. Tap our link to get the best price on the market with 82% off. If HostPapa didn’t impress you check out other alternatives.
Monthly SEO service and On-Page SEO - to increase your website organic traffic.
Website Installation service - to get your template up and running within just 6 hours without hassle. No minute is wasted and the work is going.
ONE Membership - to download unlimited number of WordPress themes, plugins, ppt and other products within one license. Since bigger is always better.

Jake Rocheleau

First it was design, then writing, and now affiliate marketing. Over a period of 6-7 years he wrote a lot of content for many websites. You can reach Jake on Twitter.

Get more to your email

Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.

From was successfully send!

Server error. Please, try again later.

Web Design