Demo - Super customizable & Responsive jQuery Carousel Plugin

Back to post

Owl Carousel 2 is a fully responsive and super customizable jQuery plugin that helps to create the most powerful touch and drag enabled carousel for modern websites. Owl Carousel has a lot of options and events and anyone can configure it easily. You can find a very basic styling of the carousel but it can be modified easily with the help of CSS as you need.

Remember that the plugin is now DEPRECATED. Check out our Slider section for more Carousel plugins.

Features:

Supported custom animation types and speed.
Mouse Drag, Touch Drag, Pull Drag and Free Drag.
Infinite loop like a carousel.
Auto Height, Auto Width and Auto Play supported.
Can be set Various Widths for each carousel item.
YouTube/Vimeo/vzaar support (fetching thumbnails as well)
Supports on all modern browsers and devices.

How to use it:

1. Include the Javascript owl.carousel.min.js at the bottom of the web page.

<script src="path/to/owl.carousel.min.js"></script>

2. Include the CSS owl.carousel.min.css in the header of the page.

<link rel="stylesheet" href="path/to/owl.carousel.min.css">

3. Include the CSS owl.theme.default.min.css for default predefined styling for the carousel.

<link rel="stylesheet" href="path/to/owl.theme.default.min.css">

4. Include the CSS animate.css if you need custom animation for the carousel.

<link rel="stylesheet" href="path/to/animate.css">

5. Add the basic HTML to the page.

<div class="owl-carousel owl-theme">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
</div>

6. Initialize the plugin and we're ready to go.

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
});

Basic and Responsive Example

1

2

3

4

5

6

7

8

9

10

11

12

HTML structure

<div class="owl-carousel owl-theme basic">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
</div>

Script

$('.basic').owlCarousel({
  loop:true,
  margin:10,
  nav:true,
  responsive:{
      0:{
          items:1
      },
      600:{
          items:3
      },
      1000:{
          items:5
      }
  }
});

Center with loop

1

2

3

4

5

6

7

8

9

10

11

12

HTML structure

<div class="owl-carousel owl-theme loop-center">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
</div>

Script

$('.loop-center').owlCarousel({
    center: true,
    items:2,
    loop:true,
    margin:10,
    responsive:{
        600:{
            items:4
        }
    }
});

Center without loop

1

2

3

4

5

6

7

8

9

10

11

12

HTML structure

<div class="owl-carousel owl-theme nonloop-center">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
</div>

Script

$('.nonloop-center').owlCarousel({
    center: true,
    items:2,
    loop:false,
    margin:10,
    responsive:{
        600:{
            items:4
        }
    }
});

Merge

1

2

3

4

6

7

8

9

10

11

12

13

14

15

HTML structure

<div class="owl-carousel owl-theme merge">
    <div class="item" data-merge="1"><h2>1</h2></div>
    <div class="item" data-merge="2"><h2>2</h2></div>
    <div class="item" data-merge="1"><h2>3</h2></div>
    <div class="item" data-merge="3"><h2>4</h2></div>
    <div class="item" data-merge="6"><h2>6</h2></div>
    <div class="item" data-merge="2"><h2>7</h2></div>
    <div class="item" data-merge="1"><h2>8</h2></div>
    <div class="item" data-merge="3"><h2>9</h2></div>
    <div class="item"><h2>10</h2></div>
    <div class="item"><h2>11</h2></div>
    <div class="item" data-merge="2"><h2>12</h2></div>
    <div class="item"><h2>13</h2></div>
    <div class="item"><h2>14</h2></div>
    <div class="item"><h2>15</h2></div>
</div>

Script

$('.merge').owlCarousel({
    items:5,
    loop:true,
    margin:10,
    merge:true,
    responsive:{
        678:{
            mergeFit:true
        },
        1000:{
            mergeFit:false
        }
    }
});

Auto Width

1

2

3

4

6

7

8

9

10

11

12

13

14

15

HTML structure

<div class="owl-carousel owl-theme auto-width">
    <div class="item" style="width:250px"><h4>1</h4></div>
    <div class="item" style="width:100px"><h4>2</h4></div>
    <div class="item" style="width:500px"><h4>3</h4></div>
    ........
</div>

Script

$('.auto-width').owlCarousel({
    margin:10,
    loop:true,
    autoWidth:true,
    items:4
})

Stage Padding

1

2

3

4

5

6

7

8

9

10

11

12

HTML structure

<div class="owl-carousel owl-theme stage-padding">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    ..........
</div>

Script

$('.stage-padding').owlCarousel({
    stagePadding: 50,
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})

Animate

1

2

3

4

5

6

7

8

9

10

11

12

HTML structure

<div class="owl-carousel owl-theme animate">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    ..........
</div>

Script

$('.animate').owlCarousel({
    animateOut: 'slideOutDown',
    animateIn: 'flipInX',
    items:1,
    margin:30,
    stagePadding:30,
    smartSpeed:450
});