Пагинация таблицы. Сдвиг списка с нумерацией

Делаю пагинацию таблицы.

При нажатии кнопки нужно чтобы список сдвигался налево и было как на рисунке внизу

  <div class="page">
    <div class="paginate">
      <span
        @click="changePageNumb(--activePage)"
        class="icons"
        style="margin-right: 2px"><</span>
      <span
        @click="changePageNumb(++activePage)"
        class="icons">c></span>
      <ul>
        <li
          v-for="(item, index) in numbers"
          :key="item+'pagination'"
          @click="changePageNumb(activePage = index+1)">{{index+1}}</li>
      </ul>
    </div>
  </div>

CSS:

.paginate{
  margin: 0;
  padding: 0;
  display:block;
  max-width: 250px;
  float: left;
  align-items: center;

  ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    overflow: hidden;
  }
  li{
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    border: 1px solid #d2d7d3;
    margin: 0 3px;
    // display: flex;
    cursor: pointer;

    &:hover{
      background: #a5caf3;
    }
  }
  span{
    cursor: pointer;
    display:block;
    float:left;
    border: 1px solid #d2d7d3;
    border-radius: 3px;

    &:hover{
      background: #a5caf3;
    }
  }
}

С этим кодом это возможно? Или может нужно вообще по другому мне прописать, чтобы было удобно сдвигать страницы?