Owl Carousel is a fantastic and options packed responsive carousel plugin. I now use it for all my sliders and carousels as I can use plugin with a huge amount of options for both single slide sliders and carousels which is fantastic. It is also very light so it really is a win all round.
It can be tricky for some users to set up at first and know what options to use for certain types of carousels you may want and how you want it to behave at break points and also to style the carousel to suit your site.
I will talk you through how to build a single image slider and a responsive carousel that shows 4 items at desktop size, 3 at tablet and 2 on mobile. I will loosely base it on a photographers site so we can have a working example.
Creating a One Item Slider
Setting Up The HTML
A very simple HTML structure is needed for Owl Carousel to work. All you need is an initial container with an ID or Class of your choice that we will use to implement Owl Carousel later. For this example to start with we will use a class of “slider”. I have used a class as you may want to have more than one single slider in place on your page and using a class means that you can implement multiple sliders on one page.
After the initial container you simply put in a div for each of your slides like so:
<div class="slider"> <div>Slide 1</div> <div>Slide 2</div> <div>Slide 3</div> </div>
That is your basic HTML structure and then you can put whatever you like in them Div’s and style them as you wish. For our example we just need to add some images in them Div’s.
<div class="slider"> <div><img src="images/hero1.jpg /></div> <div><img src="images/hero2.jpg /></div> <div><img src="images/hero3.jpg /></div> </div>
Now obviously this is doing nothing we just have the images all in the page so let’s call in Owl Carousel and get it to start working.
Implementing Owl Carousel
Firstly we bring in the scripts that we need, you can include any jQuery version you want as long as it is above 1.7.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/owl.carousel.min.js" type="text/javascript"></script>
Then we also need to include the very small included stylesheet. Of course you do not have to load it in as a separate stylesheet you can combine it with your existing stylesheet if you prefer. For our example we will leave it separate:
<link rel="stylesheet" type="text/css" href="styles/owl.carousel.css" />
Now we just need to put the following very simple jQuery code in place to get the carousel to actually begin working:
<script type="text/javascript">
$(document).ready(function() {
$(".slider").owlCarousel({
});
});
</script>
Technically this is now working as a carousel, if your screen is small enough or you shrink your browser in you should see that it automatically works as a touch slider. Just click and drag an item and you will see it works.
However we want this to be a single slide to fill the screen. Well to do that it is very very easy we just have to include one option inside that implementation code called singleItem and set that to true as it is false by default:
<script type="text/javascript">
$(document).ready(function() {
$(".slider").owlCarousel({
singleItem:true
});
});
</script>
Now we have it working as a single slide, our images are not filling the full space but don’t worry we will get to that soon.
If you inspect the code you will see that a pagination div already exists but we cannot see it as we have not styled it yet and there are no navigation arrows. To get the pagination styled you can just include the theme css that Owl Carousel comes with by including the stylesheet like we did earlier with owl.carousel..css but we are going to style these ourselves for this tutorial so you will know exactly where you can edit the styles to get the look you want.
First off we need to bring the navigation arrows in so we can style these as they are not included by default. This is again just a simple option with our implementation code called navigation and we set that to true, so your code will now look like this:
<script type="text/javascript">
$(document).ready(function() {
$(".slider").owlCarousel({
singleItem:true,
navigation: true
});
});
</script>
If you inspect the code in your browser now you will see Owl Carousel gives us 2 Div’s inside the div with the class “owl-controls” one called “owl-pagination” for our pagination dots and one called “owl-buttons” which contains our previous and next buttons. so we now know what we need to target to style these elements. So let’s start doing that!
Styling Owl Carousel
First off let’s make them lovely images a full width slider as we intended:
.owl-item img {
width: 100%;
height: auto;
}
Now for the arrows. Our main containing owl carousel div is already positioned relative form the included owl carousel styles so if we want the arrows to be centered on the image and prev on the left and next on the right that is quite simple to do. All we have to is absolutely position them 50% from the top and then margin the top negatively of the height on the buttons we want to create. We will do square buttons and although fairly ugly I will just be keeping them with the text inside and a plain white background, of course you can style these however you see fit but this should give you basic styles to work with:
.owl-prev, .owl-next {
position: absolute;
top: 50%;
margin-top: -50px;
width: 50px;
height: 50px;
text-align: center;
background-color: #fff;
}
.owl-next {
right: 0px;
}
Now the pagination items I will make circular pagination icons and have them below the image centrally aligned:
.owl-controls {
text-align: center;
}
.owl-controls .owl-page {
display: inline-block;
}
.owl-controls .owl-page span {
background-color: #333;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
display: block;
height: 12px;
margin: 5px 7px;
width: 12px;
}
Great so we can see everything now but we don’t have the styles set up for any hovers or to signify which item is active on the pagination. So let’s add some opacity to the initial state and then on hover and when a slide is active, which Owl Carousel kindly does for us, we will have the opacity to full. Your styles will now look like this:
.owl-item img {
width: 100%;
height: auto;
}
.owl-prev, .owl-next {
position: absolute;
top: 50%;
margin-top: -50px;
width: 50px;
height: 50px;
text-align: center;
background-color: #fff;
filter: Alpha(Opacity=50);/*IE7 fix*/
opacity: 0.5;
}
.owl-prev:hover, .owl-next:hover {
filter: Alpha(Opacity=100);/*IE7 fix*/
opacity: 1;
}
.owl-next {
right: 0px;
}
.owl-controls {
text-align: center;
}
.owl-controls .owl-page {
display: inline-block;
}
.owl-controls .owl-page span {
background-color: #333;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
display: block;
height: 12px;
margin: 5px 7px;
width: 12px;
filter: Alpha(Opacity=500);/*IE7 fix*/
opacity: 0.5;
}
.owl-controls .owl-page.active span, .owl-controls .owl-page:hover span {
filter: Alpha(Opacity=100);/*IE7 fix*/
opacity: 1;
}
Great! We have the single item slider in place now for the carousel.
Creating a Carousel
We set up the HTML exactly the same although in the Div’s for each item I will have a little bit more HTML in them. These will be panels that would go through to different categories in our photography site. So our HTML for the carousel looks like this:
<div class="carousel"> <div> <img src="images/panel1.jpg" /> <h3>Landscapes</h3> <p><a href="#">VIEW ></a> </div> <div> <img src="images/panel2.jpg" /> <h3>People</h3> <p><a href="#">VIEW ></a> </div> <div> <img src="images/panel3.jpg" /> <h3>Animals</h3> <p><a href="#">VIEW ></a> </div> <div> <img src="images/panel4.jpg" /> <h3>Architecture</h3> <p><a href="#">VIEW ></a> </div> </div>
Notice I have used the class of “carousel” on this one, this is again so we can use multiple carousels (if the options would be the same) on one page and it is not mixed in with our slider from earlier. So let’s put that jQuery code in place to make this implement a carousel, we can put it alongside our slider code from earlier:
<script type="text/javascript">
$(document).ready(function() {
$(".slider").owlCarousel({
singleItem:true,
navigation: true
});
$(".carousel").owlCarousel({
});
});
</script>
Well that has made it work as a carousel, if you reduce your screen size you will see it magically become a sliding carousel if the 4 panels fit on your screen. But that is not exactly how we want it to work we want this take up all the available space and we want it to be 4 on the full width at a desktop size and then 3 on tablet and 2 on mobile. Well of course the wonderful people that created Owl Carousel have these options readily available for you. All we have to do is set our “items” option to what we want it to start with and then we can set the options of itemsTablet and itemsMobile with the screen size we want it to kick in. it sounds confusing but it is as simple as this:
<script type="text/javascript">
$(document).ready(function() {
$(".slider").owlCarousel({
singleItem:true,
navigation: true
});
$(".carousel").owlCarousel({
items : 4,
itemsTablet : [900,3],
itemsMobile : [680,2]
});
});
</script>
What that code does is say so the option of itemsTablet is to kick in when the screen is below the width of 900px and then change the amount of items shown to be 3. Then when we hit the screen width of 680px change the items to 2. Of course I have just picked these numbers as they work ok these can be any number you like and don’t have to measure to a device screen or anything like that you can simply see at what size you think the carousel items get a bit squashed and then tell it to change or whatever you like.
The only thing left with this for me is I do not like the pagination on the carousel it looks a bit weird so I want to remove that and also bring in the same navigation as on the slider. That again is simply setting a couple of options, firstly “pagination” to false and “navigation” to true:
<script type="text/javascript">
$(document).ready(function() {
$(".slider").owlCarousel({
singleItem:true,
navigation: true
});
$(".carousel").owlCarousel({
items : 4,
itemsTablet : [900,3],
itemsMobile : [680,2],
navigation: true,
pagination: false
});
});
</script>
If you did not want to use the same previous and next buttons as you did for the slider you can target these specifically by using the “.carousel” we set up earlier. So let’s say we actually want these to actually be black arrows with opacity we could do this:
.carousel .owl-prev, .owl-next {
background-color: #000;
}
So these are pretty ugly examples I will admit that but you should have learned how you implement and style Owl Carousel and we have explored some of the options available and it should give you a good basis to go and start playing about with OWL Carousel and do some pretty cool stuff!
As usual you can download the files and view the demo and of course if there is anything else you would like to know or explore further feel free to comment below and I will get straight on it!
If you have completed this tutorial and are looking to add some more functionality to Owl Carousel like a zoom image function, then you will want to check out my other blog post: Owl Carousel Zoom Image Function.