я верстаю лендинг, и мне попался вот такой слайдер, я хочу использовать slick slider, но не могу понять как его настроить, чтобы получилось хотя бы нечто подобное. Как сделать вертикальный слайдер я понимаю, а как сделать, чтобы под текущим слайдом был следующий? Помогите разобраться, пожалуйста. У меня пока обычный вертикальный слайдер, где слайды идут по очереди один за другим.
-
Я правильно понял, Вы хотите чтобы у вашего вертикального слайдера отображалось два слайда на экране: текущий и следующий?– SLideR1125 ноя 2021 в 0:09
-
да, все правильно– Loks25 ноя 2021 в 12:22
Добавить комментарий
|
1 ответ
Slick-слайдер не лучшее решение для вертикального слайдера, нужно будет подбирать высоту для контента в слайдере иначе он будет глючить: снизу слайд может обрезаться, сверху вылезти низ скрытого.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" />
<div class="slick-vertical">
<div><img src="https://images.pexels.com/photos/3408744/pexels-photo-3408744.jpeg"></div>
<div><img src="https://images.pexels.com/photos/15286/pexels-photo.jpg"></div>
<div><img src="https://images.pexels.com/photos/572897/pexels-photo-572897.jpeg"></div>
<div><img src="https://images.pexels.com/photos/624015/pexels-photo-624015.jpeg"></div>
<div><img src="https://images.pexels.com/photos/3244513/pexels-photo-3244513.jpeg"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script>
<script>
$(function() {
$('.slick-vertical').slick({
vertical: true, // делает слайдер вертикальным
verticalSwiping: true,
slidesToShow: 2, // показывает по два слайда
});
});
</script>
<style>
.slick-prev,
.slick-next {
-webkit-transform: translate(-50%, 0) rotate(90deg);
-ms-transform: translate(-50%, 0) rotate(90deg);
transform: translate(-50%, 0) rotate(90deg);
left: 50%;
}
.slick-prev {
top: 0;
z-index: 1;
}
.slick-next {
top: auto;
bottom: 0;
z-index: 1;
}
img {
width: 100%;
height: 300px;
}
</style>
-
Через флексы сверстать и не будет ничего нигде вылезать..и контент будет ровненьким. 26 ноя 2021 в 5:26