Slick.js вертикальный, центральный режим, слайдыToShow> 5 не работает - PullRequest
Новая
       51

Slick.js вертикальный, центральный режим, слайдыToShow> 5 не работает

0 голосов
/ 21 мая 2018

Я заметил, что есть проблема с пятном.Я воспроизвел его на 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 ... Не могли бы вы найти решение для этой проблемы, или это скользкая проблема?

1 Ответ

0 голосов
/ 21 мая 2018

Это как-то связано с 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>
...