0

При добавлении поля centerMode: true, появляются слайды которые наполовину скрытые, но при отсутствии этого поля их нет. Проблема в том что мне нужно чтобы 3 видимые поля были активными, а при добавлении centerMode: true, активный только средний, как это можно исправить?

$('.center').slick({
  centerPadding: '60px',
  slidesToShow: 3,
  responsive: [{
      breakpoint: 768,
      settings: {
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

<div class="center" style="padding-left:10px;padding-right:10px;">
  <div style="width:90%;margin-left:1vh;margin-right:1vh;">
    <center>6</center>
  </div>
  <div style="width:90%;margin-left:1vh;margin-right:1vh;">
    <center>5</center>
  </div>
  <div style="width:90%;margin-left:1vh;margin-right:1vh;">
    <center>4</center>
  </div>
  <div style="width:90%;margin-left:1vh;margin-right:1vh;">
    <center>3</center>
  </div>
  <div style="width:90%;margin-left:1vh;margin-right:1vh;">
    <center>2</center>
  </div>
  <div style="width:90%;margin-left:1vh;margin-right:1vh;">
    <center>1</center>
  </div>
</div>

1
  • 1
    Пожалуйста, конкретизируйте свой вопрос: приведите больше деталей, экранных снимков с пояснениями, код (желательно с тем контентом, который в итоге будет или аналог). Я не понял вас, чтобы помочь вам в вашем вопросе. 1 апр 2019 в 18:15

1 ответ 1

1

А что значит "активный только средний"?

$('.center').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  centerMode: true
});
body {
  background-color: gray;
}
.center {
  border: 1px solid black;
  margin: 25px;
}
.center center {
  padding: 15px;
}
.one {
  background-color: red;
}
.two {
  background-color: green;
}
.three {
  background-color: blue;
}
.four {
  background-color: maroon;
}
.five {
  background-color: yellow;
}
.six {
  background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" />
<link rel="stylesheet" href="https://kenwheeler.github.io/slick/slick/slick-theme.css">
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

<div class="center">
  <div class="six">
    <center>6</center>
  </div>
  <div class="five">
    <center>5</center>
  </div>
  <div class="four">
    <center>4</center>
  </div>
  <div class="three">
    <center>3</center>
  </div>
  <div class="two">
    <center>2</center>
  </div>
  <div class="one">
    <center>1</center>
  </div>
</div>

2
  • Помогите пожалуйста с моим новым вопросом
    – Oleksandr
    3 апр 2019 в 18:40
  • @Alexander, там всё работает 3 апр 2019 в 18:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.