Define custom and unlimited items depending from the width. If this option is set, itemsDeskop, itemsDesktopSmall, itemsTablet, itemsMobile etc. are disabled. For better preview, order the arrays by screen size, but it's not mandatory. Don't forget to include the lowest available screen size, otherwise it will take the default one for screens lower than lowest available. In the example there is dimension with 0 with which cover screens between 0 and 450px.
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel({
itemsCustom : [
[0, 2],
[450, 4],
[600, 7],
[700, 9],
[1000, 10],
[1200, 12],
[1400, 13],
[1600, 15]
],
navigation : true
});
});
<div id="owl-demo" class="owl-carousel owl-theme"> <div class="item"><h1>1</h1></div> <div class="item"><h1>2</h1></div> <div class="item"><h1>3</h1></div> <div class="item"><h1>4</h1></div> <div class="item"><h1>5</h1></div> <div class="item"><h1>6</h1></div> <div class="item"><h1>7</h1></div> <div class="item"><h1>8</h1></div> <div class="item"><h1>9</h1></div> <div class="item"><h1>10</h1></div> <div class="item"><h1>11</h1></div> <div class="item"><h1>12</h1></div> <div class="item"><h1>13</h1></div> <div class="item"><h1>14</h1></div> <div class="item"><h1>15</h1></div> <div class="item"><h1>16</h1></div> <div class="item"><h1>17</h1></div> <div class="item"><h1>18</h1></div> <div class="item"><h1>19</h1></div> <div class="item"><h1>20</h1></div> </div>
#owl-demo .item{
background: #42bdc2;
padding: 30px 0px;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}