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 you have read our privacy policy.

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