1 свайп - 1 прокрутка слайда slick

Question

проблема в том что когда на тачпаде свайпаешь по слайдеру, то пролистывается сразу штуки 3 слайдов. Как сделать что-бы листалось по одному слайду в любом случае.

И второй вопрос. как сделать чтоб при переключении слайда, белые точки всегда двигались по часовой стрелке как на рисунке. Сейчас они двигаются по часовой и против часовой на 180 градусов, а надо чтоб при каждом переключении, просто двигались циклично на 90 градусов

.down {
    animation: rotate 1s 1 forwards;
}

.up {
    animation: rotateRever 1s 1 forwards;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);

    }
    to {
        transform: rotate(180deg);
        margin-top: 11px!important;
    }
}
@keyframes rotateRever {
    from {
        transform: rotate(180deg);
        margin-top: 11px!important;
    }
    to {
        transform: rotate(0deg);

    }
}





var mySlider = $('.sliders');

mySlider.slick({
    dots: false,
    infinite: true,
    slidesToScroll: 1,
    initialSlide: 3,
    vertical: true,
    centerMode: true,
});

mySlider.mousewheel(function(e) {

    e.preventDefault();

    if (e.deltaY < 0) {
        $(this).slick('slickNext');
    } else {
        $(this).slick('slickPrev');
    }
});
mySlider.on('beforeChange', function(event, slick, currentSlide, nextSlide){
    if(nextSlide > currentSlide){
      $('#kkru').css('animation', 'rotate 1s 1 forwards');
    }else{
      $('#kkru').css('animation', 'rotateRever 1s 1 forwards');
    }
})

Answer 1

теперь вертится как надо

var mySlider = $('.sliders');

mySlider.slick({
    dots: false,
    infinite: false,
    slidesToScroll: 1,
    initialSlide: 3,
    vertical: true,
    centerMode: true,
});

mySlider.mousewheel(function(e) {

    e.preventDefault();

    if (e.deltaY < 0) {
        $(this).slick('slickNext');
    } else {
        $(this).slick('slickPrev');
    }
});
mySlider.on('beforeChange', function(event, slick, currentSlide, nextSlide){
    if(nextSlide > currentSlide){
        turnEllipse(90);
    }else{
        turnEllipse(-90);
    }
})





function turnEllipse(degrees) {
    var angle = $("#kkru").data("angle");
    if (!angle)
        angle = 0;
    angle = +angle + degrees;
    $("#kkru")
        .data("angle", angle)
        .css({ transform: "rotate(" + angle + "deg)", transition: "1s" });
}

БЛОГ НА HUSL

1 свайп - 1 прокрутка слайда slick

Ответы (1 шт):