Responsive Center Merge Auto Width Url Hash Nav Events Stage Padding rtl Lazyload Video Animate Autoplay Auto Height Mousewheel

Merge

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>