光滑滑块CSS无限错误动画

Question

帮我弄清楚为什么从最后一张幻灯片切换到第一张幻灯片，反之亦然。 应该与第一张幻灯片和第二张幻灯片之间的过渡相同。

$( document ).ready(function() {

  $('.js-slider-sphere').slick({
    arrows: false,
    slidesToShow: 1,
    dots: false,
    autoplay: false,
    speed: 999,
    mobileFirst: true,
    rows: 0,
    infinite: true,
    asNavFor: $('.js-slider-sphere-min')
  });


  $('.js-slider-sphere-min').slick({

    arrows: false,
    slidesToShow: 1,
    dots: false,
    autoplay: false,
    speed: 1000,
    mobileFirst: true,
    infinite: true,
    rows: 0,
    asNavFor: $('.js-slider-sphere'),
    cssEase: 'linear',
    variableWidth: true,

  });

});

.b-sphere__list-big {
  overflow: hidden;
}

.b-sphere__item {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 100%;
  height: 518px;
}

.b-sphere__item-min {
  display: inline-block;
  vertical-align: top;
  padding: 0 25px;
}

.b-sphere__image {
  object-fit: cover;
  font-family: "object-fit: cover;";
  width: 100%;
}

.b-sphere__image--big {
  height: 768px;
}

.b-sphere__image--min {
  width: 279px;
  height: 158px;
  margin-bottom: 33px;
}

.b-sphere__info {
  margin-bottom: 41px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 119px 0 0;
  width: 50%;
  padding-top: 209px;
  margin-bottom: 0;
  margin-left: 113px;
}

.b-container {
  width: 960px;
  margin: 0 auto;
  padding: 0;
}

.b-sphere__list-content {
  position: absolute;
  right: 0;
  z-index: 1;
  width: 405px;
  bottom: 95px;
  overflow: visible;
}

.b-sphere__next-name {
  position: relative;
  color: #fff;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  width: 170px;
  padding-left: 30px;
  opacity: 0;
  -webkit-transition: opacity .2s ease-out;
  transition: opacity .2s ease-out;
}

.b-sphere__item-min.slick-slide .b-sphere__image--min {
  opacity: 0;
  -webkit-transition: opacity .2s linear;
  transition: opacity .2s linear;
  -webkit-transition-delay: .5s;
  transition-delay: .5s;
}

.b-sphere__item-min:not(.slick-current) .b-sphere__image--min {
  opacity: 0;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.b-sphere__item-min.slick-slide.slick-current.slick-active .b-sphere__image--min {
  opacity: 1;
}

.slick-active .b-sphere__next-name {
  opacity: 1;
}

.b-sphere__item-min.slick-slide.slick-current.slick-active+.b-sphere__item-min .b-sphere__image--min {
  opacity: .9;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>

<div class="b-sphere__list-big js-slider-sphere">
  <div class="b-sphere__item"><img class="b-sphere__image b-sphere__image--big js-image-wrapper" src="http://www.ellegirl.ru/th.php?url=0/3911/458e/750@500@3911458e4f173f9e3c266925929dcf68-YmYwZDMwOWZlNg.jpg" alt="" role="presentation">
    <div class="b-sphere__info">
      <div class="b-container">
        <div class="b-sphere__title">Автомобили и мотоциклы1
        </div>
        <div class="b-text-block b-text-block--big b-text-block--sphere roboto-regular">
          <p>Серия многофункциональных защитных нанокерамических покрытий для автомобиля. С Ceramic Pro ваша машина всегда выглядит как новая.</p>
        </div><a class="b-button b-button--sphere b-button--without-arrow" href="javascript:void(0);" title="Подробнее">Подробнее</a>
      </div>
    </div>
  </div>
  <div class="b-sphere__item"><img class="b-sphere__image b-sphere__image--big js-image-wrapper" src="http://www.factroom.ru/facts/wp-content/uploads/2013/09/122-620x420.jpg" alt="" role="presentation">
    <div class="b-sphere__info">
      <div class="b-container">
        <div class="b-sphere__title">Водный транспорт
        </div>
        <div class="b-text-block b-text-block--big b-text-block--sphere roboto-regular">
          <p>Серия многофункциональных защитных нанокерамических покрытий для автомобиля. С Ceramic Pro ваша машина всегда выглядит как новая.</p>
        </div><a class="b-button b-button--sphere b-button--without-arrow" href="javascript:void(0);" title="Подробнее">Подробнее</a>
      </div>
    </div>
  </div>
  <div class="b-sphere__item"><img class="b-sphere__image b-sphere__image--big js-image-wrapper" src="http://ic.pics.livejournal.com/kibernetika/23548666/189004/189004_original.jpg" alt="" role="presentation">
    <div class="b-sphere__info">
      <div class="b-container">
        <div class="b-sphere__title">Автомобили и мотоциклы2
        </div>
        <div class="b-text-block b-text-block--big b-text-block--sphere roboto-regular">
          <p>Серия многофункциональных защитных нанокерамических покрытий для автомобиля. С Ceramic Pro ваша машина всегда выглядит как новая.</p>
        </div><a class="b-button b-button--sphere b-button--without-arrow" href="javascript:void(0);" title="Подробнее">Подробнее</a>
      </div>
    </div>
  </div>
</div>
<div class="b-sphere__list-content js-slider-sphere-min">
  <div class="b-sphere__item-min"><img class="b-sphere__image b-sphere__image--min js-image-wrapper" src="http://www.ellegirl.ru/th.php?url=0/3911/458e/750@500@3911458e4f173f9e3c266925929dcf68-YmYwZDMwOWZlNg.jpg" alt="" role="presentation">
    <div class="b-sphere__next-name icon-arrow-button-next">Водный транспорт
    </div>
  </div>
  <div class="b-sphere__item-min"><img class="b-sphere__image b-sphere__image--min js-image-wrapper" src="http://www.factroom.ru/facts/wp-content/uploads/2013/09/122-620x420.jpg" alt="" role="presentation">
    <div class="b-sphere__next-name icon-arrow-button-next">Автомобили и мотоциклы
    </div>
  </div>
  <div class="b-sphere__item-min"><img class="b-sphere__image b-sphere__image--min js-image-wrapper" src="http://ic.pics.livejournal.com/kibernetika/23548666/189004/189004_original.jpg" alt="" role="presentation">
    <div class="b-sphere__next-name icon-arrow-button-next">Автомобили и мотоциклы1
    </div>
  </div>
</div>

  

我试图将动画从父块转移到内部块，但无济于事，主题仍然跳到屏幕的左边缘。实例没有帮助。

您可以在此处http://jsfiddle.net/drtvader/of2bjudr/24/

查看示例