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'
});