Слайдер UIKit с карточками

Question

Я попытался создать слайдер с карточками, однако высота карточек при переходе выглядит странно. Вначале карта маленькая, а через несколько секунд возвращается к нормальной высоте. Есть идеи?

HTML-код:

<section class="promotion-slider">
    <div class="uk-container uk-text-center">
      <h2 class="promotion-title">Introductory Offers</h2>
      <div class="uk-position-relative uk-visible-toggle uk-light uk-margin-large-bottom" uk-slideshow="max-height: 181; animation: slide">

          <ul class="uk-slideshow-items uk-inline" style="width: 900px;">
              <li class="uk-position-center">
                <div c8ass="uk-child-width-1-2@s uk-grid-match" uk-grid>
                  <div>
                      <div class="uk-card uk-card-default uk-card-hover uk-card-body">
                          <h3 class="uk-card-title">Free</h3>
                          <p>One Free Small Laser Treatment for First Tme Clients</p>
                      </div>
                  </div>
                  <div>
                      <div class="uk-card uk-card-default uk-card-hover uk-card-body">
                          <h3 class="uk-card-title">$49</h3>
                          <p>Introductory Signature Massage or Signature Facial</p>
                      </div>
                  </div>
                </div>
              </li>
              <li class="uk-position-center">
                <div class="uk-child-width-1-2@s uk-grid-match" uk-grid>
                  <div>
                      <div class="uk-card uk-card-default uk-card-hover uk-card-body">
                          <h3 class="uk-card-title">Free</h3>
                          <p>One Free Small Laser Treatment for First Tme Clients</p>
                      </div>
                  </div>
                  <div>
                      <div class="uk-card uk-card-default uk-card-hover uk-card-body">
                          <h3 class="uk-card-title">$49</h3>
                          <p>Introductory Signature Massage or Signature Facial</p>
                      </div>
                  </div>
                </div>
              </li>
              <li class="uk-position-center">
                <div class="uk-child-width-1-2@s uk-grid-match" uk-grid>
                  <div>
                      <div class="uk-card uk-card-default uk-card-hover uk-card-body">
                          <h3 class="uk-card-title">Free</h3>
                          <p>One Free Small Laser Treatment for First Tme Clients</p>
                      </div>
                  </div>
                  <div>
                      <div class="uk-card uk-card-default uk-card-hover uk-card-body">
                          <h3 class="uk-card-title">$49</h3>
                          <p>Introductory Signature Massage or Signature Facial</p>
                      </div>
                  </div>
                </div>
              </li>
          </ul>

          <a class="uk-position-center-left uk-position-small" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
          <a class="uk-position-center-right uk-position-small" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

      </div>
    </div>
  </section>

Вы можете посмотреть здесь: https://jsfiddle.net/r7e9q1xr/