我注意到浮油有问题。我在Fiddle上复制了它:
https://jsfiddle.net/1a8ewgef/16/
HTML:
<section class="slider">
<div>slide1</div>
<div>slide2</div>
<div>slide3</div>
<div>slide4</div>
<div>slide5</div>
<div>slide6</div>
<div>slide7</div>
<div>slide8</div>
<div>slide9</div>
<div>slide10</div>
<div>slide11</div>
<div>slide12</div>
</section>
SCSS:
$c1: #3a8999;
$c2: #e84a69;
.slider {
width: auto;
margin: 30px 50px 50px;
}
.slick-slide {
background: $c1;
color: white;
padding: 40px 0;
font-size: 30px;
font-family: "Arial", "Helvetica";
text-align: center;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-dots {
bottom: -30px;
}
.slick-slide:nth-child(odd) {
background: $c2;
}
jQuery的:
$(".slider").slick({
autoplay: false,
dots: true,
vertical: true,
slidesToShow: 7,
slidesToScroll: 1,
centerMode: true
});
正如您在开头的小提琴中所看到的那样,slide1具有类“ slick-center”(平滑中心)类,但它不是垂直居中。它应该有如slide3的地方...您能为此解决方案还是这是一个基于问题的问题?
最佳答案
它与centerPadding
有关。我不确定应该具有什么价值,但是在下面的示例中,我认为它工作得很好。
我添加了centerPadding: "50%"
,还将slidesToShow: 7
更改为slidesToShow: 3
$(".slider").slick({
autoplay: false,
dots: true,
vertical: true,
verticalSwiping: true,
slidesToShow: 3,
slidesToScroll: 1,
centerMode: true,
centerPadding: "50%"
});
.slider {
width: auto;
margin: 30px 50px 50px;
}
.slick-slide {
background: #3a8999;
color: white;
padding: 40px 0;
font-size: 30px;
font-family: "Arial", "Helvetica";
text-align: center;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-dots {
bottom: -30px;
}
.slick-slide:nth-child(odd) {
background: #e84a69;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<!-- ^
Use the FORK, Luke.
create your own new fiddle test case.
-->
<section class="slider">
<div>slide1</div>
<div>slide2</div>
<div>slide3</div>
<div>slide4</div>
<div>slide5</div>
<div>slide6</div>
<div>slide7</div>
<div>slide8</div>
<div>slide9</div>
<div>slide10</div>
<div>slide11</div>
<div>slide12</div>
<div>slide13</div>
<div>slide14</div>
<div>slide15</div>
<div>slide16</div>
</section>