Slick слайдер проблема с последними слайдами

Суть проблемы в том что при листании к определенным слайдам они прыгают резко вниз (слайдер немного нестандартный, то есть два слайда должны быть по-центу и смещены вниз). Подскажите, как решить проблему с этим "прыганием", а то не могу разобратся. Спасибо !

Ссылка на CodePen: https://codepen.io/spirtix/pen/PoPVpJP



    <div class="slider">
        <div class="general-slider" id="newlisting">
          <div class="item">
            <div class="image">
              <img src="https://via.placeholder.com/570x200" class="img-responsive">
              <p>Дисплеи любых размеров, собранные из светодиодных модулей. LED-экраны обладают широким спектром возможностей для отображения контента, позволяют показывать видеоролики, динамическую и текстовую рекламу, анимацию и пр.</p>
            </div>
          </div><!-- /.item -->
          <div class="item">
            <div class="image">
              <img src="https://via.placeholder.com/570x200" class="img-responsive">
              <p>Дисплеи любых размеров, собранные из светодиодных модулей. LED-экраны обладают широким спектром возможностей для отображения контента, позволяют показывать видеоролики, динамическую и текстовую рекламу, анимацию и пр.</p>
            </div>
          </div><!-- /.item -->
          <div class="item">
            <div class="image">
              <img src="https://via.placeholder.com/570x200" class="img-responsive">
              <p>Дисплеи любых размеров, собранные из светодиодных модулей. LED-экраны обладают широким спектром возможностей для отображения контента, позволяют показывать видеоролики, динамическую и текстовую рекламу, анимацию и пр.</p>
            </div>
          </div><!-- /.item -->
          <div class="item">
            <div class="image">
              <img src="https://via.placeholder.com/570x200" class="img-responsive">
              <p>Дисплеи любых размеров, собранные из светодиодных модулей. LED-экраны обладают широким спектром возможностей для отображения контента, позволяют показывать видеоролики, динамическую и текстовую рекламу, анимацию и пр.</p>
            </div>
          </div><!-- /.item -->
          <div class="item">
            <div class="image">
              <img src="https://via.placeholder.com/570x200" class="img-responsive">
              <p>Дисплеи любых размеров, собранные из светодиодных модулей. LED-экраны обладают широким спектром возможностей для отображения контента, позволяют показывать видеоролики, динамическую и текстовую рекламу, анимацию и пр.</p>
            </div>
          </div><!-- /.item -->
          <div class="item">
            <div class="image">
              <img src="https://via.placeholder.com/570x200" class="img-responsive">
              <p>Дисплеи любых размеров, собранные из светодиодных модулей. LED-экраны обладают широким спектром возможностей для отображения контента, позволяют показывать видеоролики, динамическую и текстовую рекламу, анимацию и пр.</p>
            </div>
          </div><!-- /.item -->
        </div><!-- #newlisting -->
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>
    <script src="main.js"></script>
.general-slider .item{
    opacity: 0.5;
    transition: padding 0.5s;
    height: 700px;
    box-sizing: border-box;
}

.general-slider{
  padding: 80px 0 0 0;
}

.general-slider .item p{
    padding: 20px 45px 0 45px;
    box-sizing: border-box;
    color: #fff;
    line-height: 20px;
}

.slick-slide{
    outline: none;
}


img{
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.general-slider .item img{
    padding-top: 0;
}


.general-slider .item.slick-active{
    padding-top: 100px;
}

.general-slider .item.slick-center{
    padding-top: 100px;
}


.general-slider .item.slick-active{
    opacity: 1;
}
.slick-active + .slick-active ~ .slick-slide { opacity: 0.5; padding-top: 0;}

.slider{
    margin: 0 auto;

}

body{
    background: #222;
}
jQuery('#newlisting').slick({
    slidesToShow    : 2,
    slidesToScroll  : 1,
    centerMode      : true,
    dots            : false,
    variableWidth: false,
    centerPadding: '260px'

});

Ответы (0 шт):