Использование stagePadding для разделения элементов

Question

Вот скрипка:

https://jsfiddle.net/h8kmove5/98/

Я пытаюсь переместить левый и правый элементы к краю, как так:

http://www.owlcarousel.owlgraphic.com/demos/stagepadding.html

Но с 3 в общей сложности вместо 7.

Javascript:

$(document).ready(function() { 

    var sync1 = $("#sync1"); 
    var sync2 = $("#sync2"); 

    sync1.owlCarousel({ 
    stagePadding: 50, 
    loop:true, 
    margin:10, 
    nav:true, 
    items : 3, 
    slideSpeed : 1000, 
    navigation: true, 
    pagination:false, 
    responsiveRefreshRate : 200, 
    }); 
}); 

CSS:

#sync1 .item{ 
    background: #0c83e7; 
    padding: 80px 0px; 
    margin: 5px; 
    color: #FFF; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    text-align: center; 
} 
#sync1 .item.noItem{ 
    background: none; 
} 

HTML:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.js"></script> 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script> 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css"></script> 

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

Answer 1

После добавления обновляется сыч карусельного JS и CSS файлов, код начал работать. Я также скорректировал значение stagePadding здесь. Вот ваш обновленный fiddle

sync1.owlCarousel({ 
    stagePadding: 160, 
    loop:true, 
    margin:10, 
    nav:true, 
    responsive:{ 
     0:{ 
      items:1 
     }, 
     600:{ 
      items:2 
     }, 
     1000:{ 
      items:3 
     } 
    } 
    });