5

Когда ставится параметр centerMode: true и слайдер бесконечно прокручивается то у клонированного слайда активность не сразу срабатывает, когда карусель листается то центральный блок принимает стили активности, но если начать листать до последнего то у того блока что клонирован, активность не сразу применяется?

$(".slider").slick({
  autoplay: true,
  dots: true,
  slidesToShow: 3,
  centerMode: true
});
.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;
    transition: background 0.8s;
}
.slick-arrow{
  background: #000!important; 
}
.slick-prev:before, 
.slick-next:before {
    color: black;    
}

.slick-dots {
    bottom: -30px;
}

.slick-current {
  background: black;
}
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>

<section class="slider">
    <div>slide1</div>
    <div>slide2</div>
    <div>slide3</div>
    <div>slide4</div>
    <div>slide5</div>
    <div>slide6</div>
</section>

7
  • Не ужели ни кто не знает((((
    – Karalahti
    11 апр 2017 в 8:49
  • Если знание ангельского позволяет, можно попробовать поискать баг среди известных или даже задать там свой вопрос, разработчики slick-slider-а довольно активно подключаются к обсуждениям и хорошо знают свой код github.com/kenwheeler/slick/…
    – x-positive
    12 апр 2017 в 12:13
  • Не скажу что они на высоте но искал я там и даже человек один задавал вопрос такой же не так давно github.com/kenwheeler/slick/issues/2825 увы пока ни кто не ответил(((, вот и написал сюда взяв от туда пример, этот баг я давно заметил.
    – Karalahti
    12 апр 2017 в 12:45
  • О, уже ответили, сейчас попробую тот вариант как там
    – Karalahti
    12 апр 2017 в 12:46
  • Супер) Даже не думал, что так забавно получится) Я даже вроде бы и не при чём, а вопрос висевший два дня без ответа на конкурсе решился :D
    – x-positive
    12 апр 2017 в 12:56

1 ответ 1

4

Вот исправленный ответ

$(".slider").slick({
  autoplay: true,
  dots: true,
  slidesToShow: 3,
  centerMode: true
});
.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;
    transition: background 0.8s;
}
.slick-arrow{
  background: #000!important; 
}
.slick-prev:before, 
.slick-next:before {
    color: black;    
}

.slick-dots {
    bottom: -30px;
}

.slick-center {
  background: black;
}
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>

<section class="slider">
    <div>slide1</div>
    <div>slide2</div>
    <div>slide3</div>
    <div>slide4</div>
    <div>slide5</div>
    <div>slide6</div>
</section>

Ваш ответ

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

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