需要一个滑块不仅显示当前幻灯片，还显示上一张和下一张幻灯片的 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>
需要以%的形式指定一个参数
centerPadding: "25%",，并且该参数slidesToShow必须是奇数。