0

При прокручивании карусели (особенно в правую сторону) слайды передергиваются. Как фиксить?(хотя бы в каком направлении двигаться). Уже доходил до извращений с сетаймаутами, пробовал изменять scale, всместо высоты и ширины. (в лучшем случае, дергается слайд после прохождения полного круга).

3
  • jsfiddle.net/bv4dme6r
    – Rak123
    25 мар 2019 в 20:25
  • P.S увеличивать расстояние между блоками нельзя
    – Rak123
    25 мар 2019 в 20:33
  • Добавьте код в вопрос. Кнопка править под вопросом. 26 мар 2019 в 4:28

2 ответа 2

1

Мда, очень уж странный плагин этот slick.

Вот, кое-что удалось сделать, посредством грубых приемов. Но есть куда расти. Если хотите увидеть точно, что происходит, увеличьте длительности анимации в CSS и раскомментируйте параметр speed

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
</head>
<body>
  <div class="slider-wrap">
    <div class="mySlide-wrap">
      <div class="mySlide">1</div>
    </div>  
    <div class="mySlide-wrap">
      <div class="mySlide red">2</div>
    </div>
    <div class="mySlide-wrap">
      <div class="mySlide green">3</div>
    </div>
    <div class="mySlide-wrap">
      <div class="mySlide blue">4</div>
    </div>
    <div class="mySlide-wrap">
      <div class="mySlide gray">5</div>
    </div>
  </div>
  <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
</body>
</html>

CSS

.slider-wrap {
  display: flex;
  width: 680px;
  height: 400px;
}

.mySlide-wrap {
  margin-right: 15px;
  margin-left: 15px;
}

.mySlide {
  background: yellow;
  width: 166px;
  height: 228px;
    -webkit-transition: all 500ms linear;
    -moz-transition: all 500ms linear;
    -o-transition: all 500ms linear;
    transition: all 500ms linear;  
}

.mySlide.red {
  background: red;
}

.mySlide.green {
  background: green;
}

.mySlide.blue {
  background: blue;
}

.mySlide.gray {
  background: gray;
}


.slick-track .slick-current .mySlide {
  width: 264px;
  height: 373px;
    -webkit-transition: all 500ms linear;
    -moz-transition: all 500ms linear;
    -o-transition: all 500ms linear;
    transition: all 500ms linear;  
}

JS

$(document).ready(function () {

    $('.slider-wrap').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 1,
        prevArrow: '<div class="left">left</div>',
        nextArrow: '<div class="right">right</div>',
        variableWidth: true,
        swipe: false,
        rows: 0,
        //speed: 2500,
        responsive: [
            {
                breakpoint: 1023,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                }
            }
        ]
    });


    var slick = $('.slider-wrap').slick("getSlick");
    var getLeftOld = slick.getLeft;
    slick.getLeft = function(slideIndex) {
      var that = this;
      //console.log('getLeft '+slideIndex);
      var left = getLeftOld.call(this, slideIndex);

        if(direction === 1) {
        //if (!$(that.$slides[slideIndex]).hasClass('slick-current')) {
          direction = 0;
          //console.log('updated');
          left += 98;
        }
      //console.log(left);
      return left;
    };
    var direction = 0;
    var slideHandlerOld = slick.slideHandler;
    slick.slideHandler = function(index, sync, dontAnimate) {
      var that = this;
      //console.log('slideHandler '+index);
      //console.log('Current '+this.currentSlide);
      if (this.currentSlide < index || (this.currentSlide === 4 && index === 0)) {
        direction = 1;
      }
      return slideHandlerOld.call(this, index, sync, dontAnimate);
    };


});

Вот оно же в JSFiddle

0

Этот баг слика существует уже несколько лет(( Попробуйте просто заменить вариант анимации слайдов, установив useTransform: false. Это помогает частенько, но не факт что вам понравится столь упрощенный вариант анимации.

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