Carousel - materialcss

Owl Carousel 2 Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.

Dashboard
Advanced UI
Carousel

Basic

1

2

3

4

5

6

7

8

9

10

11

12

HTML
JS

                                                    
<div class="owl-carousel owl-theme" id="owl-demo1">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>

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

Responsive

1

2

3

4

5

6

7

8

9

10

11

12

HTML
JS

                                                    
<div class="owl-carousel owl-theme" id="owl-demo2">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>

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

Center

1

2

3

4

5

6

7

8

9

10

11

12

HTML
JS

                                                    
<div class="owl-carousel owl-theme" id="owl-demo3">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>

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

Merge

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

HTML
JS

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

                                                    
$('.owl-carousel#owl-demo4').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
JS

                                                    
<div class="owl-carousel owl-theme" id="owl-demo5">
    <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 class="item" style="width:100px"><h4>4</h4></div>
    <div class="item" style="width:50px"><h4>6</h4></div>
    <div class="item" style="width:250px"><h4>7</h4></div>
    <div class="item" style="width:120px"><h4>8</h4></div>
    <div class="item" style="width:420px"><h4>9</h4></div>
    <div class="item" style="width:120px"><h4>10</h4></div>
    <div class="item" style="width:300px"><h4>11</h4></div>
    <div class="item" style="width:450px"><h4>12</h4></div>
    <div class="item" style="width:220px"><h4>13</h4></div>
    <div class="item" style="width:150px"><h4>14</h4></div>
    <div class="item" style="width:600px"><h4>15</h4></div>
</div>

                                                    
$('.owl-carousel#owl-demo5').owlCarousel({
    margin: 10,
    loop: true,
    autoWidth: true,
    items: 4
});

Right To Left

1

2

3

4

5

6

7

8

9

10

11

                                                    
<div class="owl-carousel owl-theme" id="owl-demo6">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>

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

Autoplay

1

2

3

4

5

6

7

8

9

10

11

12

Play Stop

HTML
JS

                                                    
<div class="owl-carousel owl-theme" id="owl-demo8">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>
<a class="btn theme-bg waves-effect waves-default play">Play</a>
<a class="btn theme-bg waves-effect waves-default stop">Stop</a>

                                                    
var owl = $('.owl-carousel#owl-demo8');
owl.owlCarousel({
    items: 4,
    loop: true,
    margin: 10,
    autoplay: true,
    autoplayTimeout: 1000,
    autoplayHoverPause: true
});
$('.play').on('click', function() {
    owl.trigger('play.owl.autoplay', [1000])
});
$('.stop').on('click', function() {
    owl.trigger('stop.owl.autoplay')
});

Auto Height

1

2

3

4

5

6

7

8

9

10

11

12

HTML
JS

                                                    
<div class="owl-carousel owl-theme" id="owl-demo9">
    <div class="item" style="height:300px">
        <h4>1</h4>
    </div>
    <div class="item" style="height:100px">
        <h4>2</h4>
    </div>
    <div class="item" style="height:500px">
        <h4>3</h4>
    </div>
    <div class="item" style="height:250px">
        <h4>4</h4>
    </div>
    <div class="item" style="height:400px">
        <h4>5</h4>
    </div>
    <div class="item" style="height:500px">
        <h4>6</h4>
    </div>
    <div class="item" style="height:600px">
        <h4>7</h4>
    </div>
    <div class="item" style="height:400px">
        <h4>8</h4>
    </div>
    <div class="item" style="height:300px">
        <h4>9</h4>
    </div>
    <div class="item" style="height:350px">
        <h4>10</h4>
    </div>
    <div class="item" style="height:200px">
        <h4>11</h4>
    </div>
    <div class="item" style="height:150px">
        <h4>12</h4>
    </div>
</div>

                                                    
$('.owl-carousel#owl-demo9').owlCarousel({
    items: 1,
    margin: 10,
    autoHeight: true
});