Не работает должным образом переключатель табов UIkit вместе с слайдером (uk-slider)

У меня верстка с использованием фреймворка UIkit. И есть табы, которые переключают некий контент. На малом разрешение экрана они не помещается и было решение сделать слайдер. Слайдер работает, но табы не всегда переключатся. (а именно те табы, слайды которые первые на экрана) Помогите решить, пожалуйста, проблему.

<div class="menu-info-tabs uk-slider uk-slider-container uk-position-relative " uk-slider="sets: false; finite: true; velocity: 0; ">           
  <ul class="uk-subnav uk-subnav-pill  uk-slider-items uk-child-width-1-2 uk-child-width-1-4@m uk-flex-center" uk-tab="connect: #tabs-content; duration: 0;">
   <li><a href="#">Стандартное меню</a></li>
   <li><a href="#">Вегетерианское меню</a></li>
   <li><a href="#">Безлактозное меню</a></li>
   <li><a href="#">Безглютеновое меню</a></li>
 </ul>
</div>
          
    
<ul class="uk-switcher uk-margin" id="tabs-content">
            <li>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dolor et est tincidunt. Libero diam turpis ut eu. Scelerisque morbi pharetra tellus, est donec mattis. Eu scelerisque sed senectus posuere ut.</p>
            </li>
            <li>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo libero corporis doloremque numquam sapiente voluptas repellendus aliquid asperiores earum suscipit? Ad mollitia quisquam excepturi. Id deserunt officia quaerat maiores voluptates!</p>
            </li>
            <li>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis obcaecati quae vel nemo accusamus, quidem recusandae! Laudantium recusandae hic in mollitia, excepturi non nostrum atque? Odit sit nesciunt error architecto.</p>
            </li>
            <li>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos obcaecati neque magni fuga cumque, dolores dignissimos quibusdam quam minus aspernatur ipsa itaque consectetur sint. Hic a blanditiis maiores accusantium officia.</p>
            </li>
</ul>

Мой CSS:

.box-menu-info .menu-info-tabs .uk-tab::before {
    border-bottom: none; }
  .box-menu-info .menu-info-tabs .uk-subnav {
    padding-bottom: 56px; }
    @media (max-width: 959.98px) {
      .box-menu-info .menu-info-tabs .uk-subnav {
        flex-wrap: nowrap; } }
    .box-menu-info .menu-info-tabs .uk-subnav li {
      z-index: 1; }
      .box-menu-info .menu-info-tabs .uk-subnav li:nth-child(1) a,
      .box-menu-info .menu-info-tabs .uk-subnav li:nth-child(2) a {
        border-radius: 50px 0; }
      .box-menu-info .menu-info-tabs .uk-subnav li:nth-child(3) a,
      .box-menu-info .menu-info-tabs .uk-subnav li:nth-child(4) a {
        border-radius: 0 50px; }
      @media (max-width: 959.98px) {
        .box-menu-info .menu-info-tabs .uk-subnav li:nth-child(odd) a {
          border-radius: 0 40px; }
        .box-menu-info .menu-info-tabs .uk-subnav li:nth-child(even) a {
          border-radius: 40px 0; } }
    @media (max-width: 639.98px) {
      .box-menu-info .menu-info-tabs .uk-subnav > * {
        padding-left: 10px; } }
    .box-menu-info .menu-info-tabs .uk-subnav > * > :first-child {
      font-family: 'MuseoSansCyrl', sans-serif;
      font-size: 16px;
      font-weight: 600;
      color: #84BF04;
      line-height: 19px;
      font-weight: bold;
      letter-spacing: 0.05em;
      border: 2px solid #84BF04;
      justify-content: center;
      padding: 20px 19px;
      background: #fff; }
      @media (max-width: 1199.98px) {
        .box-menu-info .menu-info-tabs .uk-subnav > * > :first-child {
          font-size: 13px;
          padding: 20px 9px; } }
      @media (max-width: 639.98px) {
        .box-menu-info .menu-info-tabs .uk-subnav > * > :first-child {
          font-size: 11px;
          padding: 20px 9px; } }
      @media (max-width: 389.98px) {
        .box-menu-info .menu-info-tabs .uk-subnav > * > :first-child {
          padding: 20px 19px; } }
  .box-menu-info .menu-info-tabs .uk-subnav-pill a[aria-expanded="true"] {
    color: #FFFFFF;
    background: #84BF04; }
  .box-menu-info .menu-info-tabs .uk-switcher {
    text-align: left; }
    .box-menu-info .menu-info-tabs .uk-switcher p {
      font-family: 'MuseoSansCyrl', sans-serif;
      font-size: 18px;
      font-weight: 600;
      color: #3A3F5C;
      line-height: 22px;
      letter-spacing: 0.02em;
      font-weight: normal; }
      @media (max-width: 1199.98px) {
        .box-menu-info .menu-info-tabs .uk-switcher p {
          font-size: 15px; } }