Limit the number of items on pagination

Question

I have here my code, how to limit this 10 buttons to at least 4 buttons only? I'm just a beginner on programming.

My JavaScript:

$('.butt').on('click', function () {

      var duration = 0;
      var old_num = $(this).parent().find('.active-btn').val();
      var new_num = $(this).val();

      if (new_num > old_num) {

        $('#page' + old_num).toggle('slide', {
          duration,
          direction: 'left',
            complete: function () {

              $('#btn_page' + old_num).removeClass('active-btn');
              $('#page' + old_num).clearQueue();
              $('#page' + old_num).removeClass('active-page');

              $('#page' + new_num).addClass('active-page');
              $('#btn_page' + new_num).addClass('active-btn');

              $('#page' + new_num).toggle('slide', {
                duration,
                direction: 'right'
              });
            }
        });

HTML:

<ul class="btn-group pagination" id="btn-group">
<br>
    <li class="btn butt active-btn" type="button" id="btn_page1"  value="1"> 1 </li>
    <li class="btn butt" type="button" id="btn_page2"  value="2"> 2</li>
    <li class="btn butt" type="button" id="btn_page3"  value="3"> 3 </li>
    <li class="btn butt" type="button" id="btn_page4"  value="4"> 4</li>
    <li class="btn butt" type="button" id="btn_page5"  value="5"> 5</li>
    <li class="btn butt" type="button" id="btn_page6"  value="6"> 6 </li>
    <li class="btn butt" type="button" id="btn_page7"  value="7"> 7</li>
    <li class="btn butt" type="button" id="btn_page8"  value="8"> 8</li>
    <li class="btn butt" type="button" id="btn_page9"  value="9"> 9 </li>
    <li class="btn butt" type="button" id="btn_page10"  value="10"> 10</li>  
</ul>