Making a Responsive Image Carousel

What is OWL Carousel?

OWL is a jQuery plugin that results in great looking and mobile friendly image carousels for the website you are building. It comes with many options including touch controls, multiple images, slider timer and responsive layout. Also it doesn’t take that long to set up.

Download

First thing is first, lets get the code. The plugin can be downloaded here.

Let’s Get Started

In this tutorial we’ll be setting up a full width, responsive, multi-image carousel with touch for mobile.

Get an HTML document going and go ahead and link all the CSS and Javascript to your HTML document. In the header include the following links:

<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="owl-carousel/owl.theme.css">

We’ll add our script src tags in the header. This will make the JS a bit more predictable.

<script src="owl-carousel/owl.carousel.js"></script>
<script src="assets/js/jquery-1.9.1.min.js"></script>

(Note: The version of jQuery you use will vary, so change your ‘src’ accordingly)

Add The Content

Within the body tag, include a div for the carousel and its contents. This is were we include out images, you can use which ever ones you would like.

<div id="owl-demo">
    <div> <img src="imgs/image01.png" alt="example image"></div>
    <div> <img src="imgs/image02.png" alt="example image"></div>
    <div> <img src="imgs/image03.png" alt="example image"></div>
    <div> <img src="imgs/image04.png" alt="example image"></div>
    <div> <img src="imgs/image05.png" alt="example image"></div>
    <div> <img src="imgs/image06.png" alt="example image"></div>
</div>

We Need A Little Javascript Magic

Below the content we’ll want to intiate some Javascript..

<script>
$(document).ready(function() {

    $("#owl-demo").owlCarousel({
        autoPlay: 7000, //Set AutoPlay to 7 seconds
        items : 3,
        itemsDesktop : [1199,3],
        itemsDesktopSmall : [979,3]
    });
    
});
</script>

‘autoPlay’ is determining how long the carousel waits before transistioning.

‘items : 3’ is stating how many images to show side by side at the largest screen setting.

Final Markup

Your final markup should look similiar to the following. Play around with the values to get a different result.

End Result

Here is my example on mobile..