Merge参数需要在任何子元素(也可以是嵌套结构)上设置data-merge="number_items_to_merge"
。这里有一个相似的选项叫mergeFit
,该选项可以使merged元素伤害屏幕的大小。
See item 6 on breakpoint below and above 1000px
screen width.
$('.owl-carousel').owlCarousel({
items:5,
loop:true,
margin:10,
merge:true,
responsive:{
678:{
mergeFit:true
},
1000:{
mergeFit:false
}
}
});
<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>