OwlCarousel2-支持触摸屏的响应式jQuery旋转木马插件-Merge_jQuery之家-自由分享jQuery、html5、css3的插件库

1

2

3

4

6

7

8

9

10

11

12

13

14

15

Overview

Merge参数需要在任何子元素（也可以是嵌套结构）上设置data-merge="number_items_to_merge"。这里有一个相似的选项叫mergeFit，该选项可以使merged元素伤害屏幕的大小。

See item 6 on breakpoint below and above 1000px screen width.

Setup

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

html

<div class="owl-carousel">
    <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>