Как добавить плавности слайдеру? Плагин Flipster slider

var carousel = $("#carousel-sl").flipster({
    loop: false,
    start: 'center',
    style: 'wheel',
    spacing: -0.56,
    scrollwheel: false,
    buttons: false,
    fadeIn: 800
  });

/*Добавлено*/
.flipster--wheel .flipster__container, .flipster--wheel .flipster__item__content {
    -webkit-transition: all 700ms ease-in-out!important; 
    -o-transition: all 700ms ease-in-out!important;
    transition: all 700ms ease-in-out!important;
}
/*************************************************************/

.slider-outer-wrap__new {
  width: 100%;
}

.flipster__item--current .item-city {
  -webkit-transition: all 350ms ease-in-out!important; /*Добавлено*/
    -o-transition: all 350ms ease-in-out!important; /*Добавлено*/
    transition: all 350ms ease-in-out!important; /*Добавлено*/
  color: #72BD77;
}

.flipster--wheel .flipster__item__content {
  transform: rotateZ(0deg) translate(0%, 0%) !important;
  width: 150px;
}

.flipster__container {
  height: 95px !important;
  text-align: center;
}

.flipster__item--past .item-city {
  color: #999BA5;
  line-height: 22px;
  text-align: center;
  font-size: 16px;
  opacity: 0.5;
  transform: rotateZ(-0deg) translate(0%, 100%) !important;
}

.flipster__item--future .item-city {
  color: #999BA5;
  line-height: 22px;
  text-align: center;
  font-size: 16px;
  transform: rotateZ(-0deg) translate(0%, 100%) !important;
  opacity: 0.5;
}

.flipster__item--past-2 .item-city {
  transform: rotateZ(-0deg) translate(0%, 170%) !important;
  font-size: 14px !important;
  font-weight: 400;
  opacity: 0.4;
}

.flipster__item--future-2 .item-city {
  transform: rotateZ(-0deg) translate(0%, 170%) !important;
  font-size: 14px !important;
  font-weight: 400;
  opacity: 0.4;
}

.flipster__item--future-3 {
  transform: rotateZ(-0deg) translate(0%, 107%) !important;
}

.flipster__item--past-3 {
  transform: rotateZ(-0deg) translate(0%, 107%) !important;
}

.flipster__item--future {
  opacity: 1 !important;
}


/* стили для текста */

.gallery-box {
  display: block;
  position: relative;
  margin-top: 48px;
}

.slider-outer-wrap {
  max-width: 400px;
  margin: 0 auto;
  position: relative;
}

.slider-outer-wrap__new {
  width: 100%;
}

.cityes-wrap {
        position: relative;
        line-height: 1;
    }
  
  a {
    text-decoration: none;  
  }
  
  .item-city {
  display: block;
  position: relative;
  height: 40px;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  color: #72BD77;
  font-weight: 500;
  font-size: 24px;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.flipster.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.flipster.min.js"></script>

<div class="gallery-box">
  <div class="slider-outer-wrap slider-outer-wrap__new">
    <div id="carousel-sl">
      <div class="cityes-wrap">
        <ul>
          <li>
            <div class="sl-item">
              <a href="" class="item-city">
                <span class="city-title">Нью-Йорк</span>
              </a>
            </div>
          </li>
          <li>
            <div class="sl-item">
              <a href="" class="item-city">
                <span class="city-title">Нью-Йорк</span>
              </a>
            </div>
          </li>
          <li>
            <div class="sl-item">
              <a href="" class="item-city">
                <span class="city-title">Нью-Йорк</span>
              </a>
            </div>
          </li>
          <li>
            <div class="sl-item">
              <a href="" class="item-city">
                <span class="city-title">Нью-Йорк</span>
              </a>
            </div>
          </li>
          <li>
            <div class="sl-item">
              <a href="" class="item-city">
                <span class="city-title">Нью-Йорк</span>
              </a>
            </div>
          </li>
          <li>
            <div class="sl-item">
              <a href="" class="item-city">
                <span class="city-title">Нью-Йорк</span>
              </a>
            </div>
          </li>
          <li>
            <div class="sl-item">
              <a href="" class="item-city">
                <span class="city-title">Нью-Йорк</span>
              </a>
            </div>
          </li>
          <li>
            <div class="sl-item">
              <a href="" class="item-city">
                <span class="city-title">Нью-Йорк</span>
              </a>
            </div>
          </li>
          <li>
            <div class="sl-item">
              <a href="" class="item-city">
                <span class="city-title">Нью-Йорк</span>
              </a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>