Почему не могу настроить слайдер Slick?
Вот код слайдера хочу чтоб после 510 зделать простой мод с чтоб по 1 слайду крутилось прописал вроде правильные брейкпоинты но все равно не работаеть
$(".center_two").slick({
centerMode: true,
arrows: false,
centerPadding: "-25px",
slidesToShow: 2,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: "10px",
slidesToShow: 2,
},
},
{
breakpoint: 713,
settings: {
arrows: false,
centerMode: true,
centerPadding: "160px",
slidesToShow: 1,
},
},
{
breakpoint: 680,
settings: {
arrows: false,
centerMode: true,
centerPadding: "140px",
slidesToShow: 1,
},
},
{
breakpoint: 641,
settings: {
arrows: false,
centerMode: true,
centerPadding: "120px",
slidesToShow: 1,
},
},
,
{
breakpoint: 641,
settings: {
arrows: false,
centerMode: true,
centerPadding: "100px",
slidesToShow: 1,
},
},
{
breakpoint: 629,
settings: {
arrows: false,
centerMode: false,
slidesToShow: 1,
},
},
{
breakpoint: 619,
settings: {
arrows: false,
centerMode: true,
centerPadding: "30px",
slidesToShow: 1,
},
},
{
breakpoint: 597,
settings: {
arrows: false,
centerMode: true,
centerPadding: "100px",
slidesToShow: 1,
},
},
{
breakpoint: 555,
settings: {
arrows: false,
centerMode: true,
centerPadding: "100px",
slidesToShow: 1,
},
},
{
breakpoint: 555,
settings: {
arrows: false,
centerMode: true,
centerPadding: "75px",
slidesToShow: 1,
},
},
{
breakpoint: 509,
settings: {
arrows: false,
centerMode: true,
centerPadding: "55px",
slidesToShow: 1,
},
},
{
breakpoint: 512,
slidesToShow: 1,
slidesToScroll: 1,
settings: {
infinite: true,
arrows: false,
centerMode: true,
centerPadding: "35px",
},
},
{
breakpoint: 495,
settings: {
arrows: false,
centerMode: false,
centerPadding: "-10px",
slidesToShow: 1,
},
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: "70px",
slidesToShow: 1,
},
},
{
breakpoint: 414,
settings: {
arrows: false,
centerMode: true,
centerPadding: "60px",
slidesToShow: 1,
},
},
{
breakpoint: 390,
settings: {
arrows: false,
centerMode: true,
centerPadding: "50px",
slidesToShow: 1,
},
},
{
breakpoint: 372,
settings: {
arrows: false,
centerMode: true,
centerPadding: "38px",
slidesToShow: 1,
},
},
{
breakpoint: 372,
settings: {
arrows: false,
centerMode: true,
centerPadding: "30px",
slidesToShow: 1,
},
},
], });
Ответы (1 шт):
Автор решения: HamSter
→ Ссылка
Все работает:
$(".center_two").slick({
centerMode: true,
arrows: false,
centerPadding: "-25px",
slidesToShow: 2,
responsive: [{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: "10px",
slidesToShow: 2,
},
},
{
breakpoint: 713,
settings: {
arrows: false,
centerMode: true,
centerPadding: "160px",
slidesToShow: 1,
},
},
{
breakpoint: 680,
settings: {
arrows: false,
centerMode: true,
centerPadding: "140px",
slidesToShow: 1,
},
},
{
breakpoint: 641,
settings: {
arrows: false,
centerMode: true,
centerPadding: "120px",
slidesToShow: 1,
},
}, ,
{
breakpoint: 641,
settings: {
arrows: false,
centerMode: true,
centerPadding: "100px",
slidesToShow: 1,
},
},
{
breakpoint: 629,
settings: {
arrows: false,
centerMode: false,
slidesToShow: 1,
},
},
{
breakpoint: 619,
settings: {
arrows: false,
centerMode: true,
centerPadding: "30px",
slidesToShow: 1,
},
},
{
breakpoint: 597,
settings: {
arrows: false,
centerMode: true,
centerPadding: "100px",
slidesToShow: 1,
},
},
{
breakpoint: 555,
settings: {
arrows: false,
centerMode: true,
centerPadding: "100px",
slidesToShow: 1,
},
},
{
breakpoint: 555,
settings: {
arrows: false,
centerMode: true,
centerPadding: "75px",
slidesToShow: 1,
},
},
{
breakpoint: 509,
settings: {
arrows: false,
centerMode: true,
centerPadding: "55px",
slidesToShow: 1,
},
},
{
breakpoint: 512,
slidesToShow: 1,
slidesToScroll: 1,
settings: {
infinite: true,
arrows: false,
centerMode: true,
centerPadding: "35px",
},
},
{
breakpoint: 495,
settings: {
arrows: false,
centerMode: false,
centerPadding: "-10px",
slidesToShow: 1,
},
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: "70px",
slidesToShow: 1,
},
},
{
breakpoint: 414,
settings: {
arrows: false,
centerMode: true,
centerPadding: "60px",
slidesToShow: 1,
},
},
{
breakpoint: 390,
settings: {
arrows: false,
centerMode: true,
centerPadding: "50px",
slidesToShow: 1,
},
},
{
breakpoint: 372,
settings: {
arrows: false,
centerMode: true,
centerPadding: "38px",
slidesToShow: 1,
},
},
{
breakpoint: 372,
settings: {
arrows: false,
centerMode: true,
centerPadding: "30px",
slidesToShow: 1,
},
},
],
});
* {
box-sizing: border-box;
}
.slick-slide {
border: 1px solid;
}
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>
<div class="center_two">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
Возможно Вам стоит привести всю разметку, возможно в стилях проблема.
