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"銆傝繖閲屾湁涓€涓浉浼肩殑閫夐」鍙?code>mergeFit锛岃閫夐」鍙互浣縨erged鍏冪礌浼ゅ灞忓箷鐨勫ぇ灏忋€?/p>

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>