Slick slider, как центрировать один слайд?

Question

[Patris546]

Слайдер состоит из 7 слайдов. Необходимо сделать так, чтобы один слайд был посередине, а перед ним и после слайд выглядывали по бокам. Использую Slick Slider в режиме центрирования слайда. Работает как надо только если ставить количество слайдов по центру 2 или например 3, а мне нужен 1 слайд по центру. В таком случае centrMode перестает работать.

$('.clusters__river-slider').slick({
    centerMode: true,
    slidesToShow: 1,
    initialSlide: 2,
});

<div class="clusters__river-slider">
                    <div class="clusters__river-item">
                        <img src="../../img/main/slider__river/img1.jpg" alt="" class="clusters__river-img">
                    </div>
                    <div class="clusters__river-item">
                        <img src="../../img/main/slider__river/img2.jpg" alt="" class="clusters__river-img">
                    </div>
                    <div class="clusters__river-item">
                        <img src="../../img/main/slider__river/img3.jpg" alt="" class="clusters__river-img">
                    </div>
                    <div class="clusters__river-item">
                        <img src="../../img/main/slider__river/img4.jpg" alt="" class="clusters__river-img">
                    </div>
                    <div class="clusters__river-item">
                        <img src="../../img/main/slider__river/img5.jpg" alt="" class="clusters__river-img">
                    </div>
                    <div class="clusters__river-item">
                        <img src="../../img/main/slider__river/img6.jpg" alt="" class="clusters__river-img">
                    </div>
                    <div class="clusters__river-item">
                        <img src="../../img/main/slider__river/img7.jpg" alt="" class="clusters__river-img">
                    </div>
                </div>

&__river-slider{
    width: 1440px;
    margin-left: -130px;
    padding-bottom: 80px;
 }
 &__river-item{
    max-width: 1180px;
    padding: 0 10px;
    margin: 0 auto;
 }

Вот такого вида хочется добиться

Вот, что получается

Comments

[Ankhena]

У swiper точно можно ставить, например, 1.8
У слика не помню, попробуйте.

Answer 1

[Сергей delphinpro]

Обманите его. Просто расширьте видимую часть слайдера

.my-slider
  .my-slider-clip
    .my-slider-container 
      .swiper

.my-slider-clip { margin-inline: -50px; overflow: hidden; }
.my-slider-container { padding-inline: 50px; }
.ny-slider .swiper { overflow: visible; }

D этом случае и centerMode не нужен. Просто один видимый слайд slidesToShow: 1;.