Owlcarusel doesn't want to parse the ul>li list?

Question

JavaScript

I create a carousel instance from the list ul>li

<div class="pagination-block carusel owl-example">
              <ul class="pagination">
<li><a href="#" onclick="page('25');"><i class="zmdi zmdi-long-arrow-left"></i></a></li>

<li class="active"><a href="#">1</a></li>

<li><a href="#" onclick="page(2);">2</a></li>

<li><a href="#" onclick="page(3);">3</a></li>

<li><a href="#" onclick="page(4);">4</a></li>

<li><a href="#" onclick="page(5);">5</a></li>

<li><a href="#" onclick="page(6);">6</a></li>

<li><a href="#" onclick="page(7);">7</a></li>

<li><a href="#" onclick="page(8);">8</a></li>

<li><a href="#" onclick="page(9);">9</a></li>

<li><a href="#" onclick="page(10);">10</a></li>

<li><a href="#" onclick="page(11);">11</a></li>

<li><a href="#" onclick="page(12);">12</a></li>

<li><a href="#" onclick="page(13);">13</a></li>

<li><a href="#" onclick="page(14);">14</a></li>

<li><a href="#" onclick="page(15);">15</a></li>

<li><a href="#" onclick="page(16);">16</a></li>

<li><a href="#" onclick="page(17);">17</a></li>

<li><a href="#" onclick="page(18);">18</a></li>

<li><a href="#" onclick="page(19);">19</a></li>

<li><a href="#" onclick="page(20);">20</a></li>

<li><a href="#" onclick="page(21);">21</a></li>

<li><a href="#" onclick="page(22);">22</a></li>

<li><a href="#" onclick="page(23);">23</a></li>

<li><a href="#" onclick="page(24);">24</a></li>

<li><a href="#" onclick="page(25);">25</a></li>
</ul>
</div>

I connect the plugin to the block with the carousel class:

$('.carusel').owlCarousel({
    rtl:true,
    loop:true,
    margin:10,
    nav:true
});

The problem is that when scrolling, all elements are involved and the width of the content block decreases.