нужно сделать вот такую внешний вид у slick slider
надо сделать так чтобы видна была кусок предыдущего слайда и кусок следующего (что бы было понятно что можно листать слайдер )
Спасибо!
-
Так а в чем проблема? там в примере есть Center Mode.– Andrey Ivasko20 мар 2019 в 18:41
-
посмотрите "Swiper Slider" у него очень обширное api– ccxdec20 мар 2019 в 19:58
-
Andrey Ivasko может напишите код (а то я сам не смог реализовать )– Антон20 мар 2019 в 21:44
1 ответ
Здравствуй, Антон! Это пример для понимания опции centerMode. Всё более подробно описано в документации slick carousel на их же сайте.
$("#items-slide").slick({
centerMode: true,
centerPadding: "60px"
});
#items-slide {
margin: 20px auto;
width: 90%;
}
.slide {
font-family: "Arial", sans-serif;
background-color: #0950c1;
border: 4px solid #666;
text-align: center;
line-height: 100px;
font-weight: bold;
font-size: 26px;
height: 100px;
color: #fff;
}
.slick-slide:nth-child(even) .slide {
background-color: #5b9aff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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" />
<div id="items-slide">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
</div>
P.S stackoverflow - место где задают вопросы, и отвечики объясняют что да как. По этому я попрошу в следующий раз не просить сделать ту или иную вещь вместо вас, а просить помочь с объяснением проблемы и как его можно и/или нужно решить. Это просто, на будущее.
-
Спасибо, за пример и объяснения. сделал так: добавил centerMode и бордер у под блока слайдера все проблема решена js --> $("#items-slide").slick({ centerMode: true, centerPadding: "30px" }); css #items-slide .slide { border: 8px solid #fffbdb; }– Антон21 мар 2019 в 10:12
-