Slick Slider Как отобразить часть предыдущего и следующего слайда?

Question

Есть необходимость в слайдере показывать не только текущий слайд но и 24% предыдущего и следующего слайда, подскажите, пожалуйста как это реализовать ? Не могу найти в документации. Пробовал так.

jQuery(function($) {


  //     Slider
  const slider = $(".slider");
  slider.slick({
    centerMode: true,
    infinite: false,
    slidesToShow: 1.24,
    centerPadding: "20px",
    speed: 500,
    initialSlide: 1,
    responsive: [{
        breakpoint: 768,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: "20px",
          slidesToShow: 1
        }
      },
      {
        breakpoint: 490,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: "10px",
          slidesToShow: 1
        }
      }
    ]
  });


});

body {
  margin: 0;
}

.wrapper {
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
}

.slider {
  padding: 0;
  list-style-type: none;
}

.slider_item {
  position: relative;
}

.slider_item span {
  position: absolute;
  bottom: 20%;
  left: 50%;
  font-size: 40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css" />


<div class="wrapper">
  <ul class="slider">
    <li class="slider_item">
      <img src="https://placehold.co/795x472" alt="image1" width="795" height="472" loading="lazy">
      <span>1</span>
    </li>
    <li class="slider_item">
      <img src="https://placehold.co/795x472" alt="image1" width="795" height="472" loading="lazy">
      <span>2</span>
    </li>
    <li class="slider_item">
      <img src="https://placehold.co/795x472" alt="image1" width="795" height="472" loading="lazy">
      <span>3</span>
    </li>
    <li class="slider_item">
      <img src="https://placehold.co/795x472" alt="image1" width="795" height="472" loading="lazy">
      <span>4</span>
    </li>
    <li class="slider_item">
      <img src="https://placehold.co/795x472" alt="image1" width="795" height="472" loading="lazy">
      <span>5</span>
    </li>
  </ul>


</div>




<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

Answer 1

Нужно указать в % параметр centerPadding: "25%", и параметр slidesToShow должен быть целочисленным нечетным.

jQuery(function($) {


  //     Slider
  const slider = $(".slider");
  slider.slick({
    centerMode: true,
    infinite: false,
    slidesToShow: 1,
    centerPadding: "25%",
    speed: 500,
    initialSlide: 1,
    responsive: [{
        breakpoint: 768,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: "20px",
          slidesToShow: 1
        }
      },
      {
        breakpoint: 490,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: "10px",
          slidesToShow: 1
        }
      }
    ]
  });


});

body {
  margin: 0;
}

.wrapper {
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
}

.slider {
  padding: 0;
  list-style-type: none;
}

.slider_item {
  position: relative;
}

.slider_item span {
  position: absolute;
  bottom: 20%;
  left: 50%;
  font-size: 40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css" />


<div class="wrapper">
  <ul class="slider">
    <li class="slider_item">
      <img src="https://placehold.co/795x472" alt="image1" width="795" height="472" loading="lazy">
      <span>1</span>
    </li>
    <li class="slider_item">
      <img src="https://placehold.co/795x472" alt="image1" width="795" height="472" loading="lazy">
      <span>2</span>
    </li>
    <li class="slider_item">
      <img src="https://placehold.co/795x472" alt="image1" width="795" height="472" loading="lazy">
      <span>3</span>
    </li>
    <li class="slider_item">
      <img src="https://placehold.co/795x472" alt="image1" width="795" height="472" loading="lazy">
      <span>4</span>
    </li>
    <li class="slider_item">
      <img src="https://placehold.co/795x472" alt="image1" width="795" height="472" loading="lazy">
      <span>5</span>
    </li>
  </ul>


</div>




<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

БЛОГ НА HUSL

Slick Slider Как отобразить часть предыдущего и следующего слайда?

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