Hover на slick-слайдер

#slickjs

Для перелистывания слайдера использую cssEase:'linear' и когда навожу на элемент
- появляется box-shadow, позиция мышки остается на слайде. Слайдер при этом продолжает
скроллиться и box-shadow скроллится вместе со слайдером, но позиция мышки остается
неизменной.



$(function() {
    $('.your-class').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 0,
        speed: 4000,
        pauseOnHover: false,
        cssEase:'linear'
    });
});
.your-class div {
    display: block;
    height: 100px;
    width: 800px;
}
.your-class div:hover {
  -webkit-box-shadow: 0 20px 55px 13px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 20px 55px 13px rgba(0, 0, 0, 0.2);
	box-shadow: 0 20px 55px 13px rgba(0, 0, 0, 0.2);
}





  
aaaaa aaaaaaa
  
bbbbb bbbbbbb
  
ccccc ccccccc
  
ddddd ddddddd
  
eeeee eeeeeee
  
fffff fffffff
  
ggggg ggggggg
  
hhhhh hhhhhhh




    

Ответы

Ответ 1

Во время анимации перемещения :hover не срабатывает. Браузер ждет ее окончания и
эта проблема известна https://bugs.chromium.org/p/chromium/issues/detail?id=246304. 
Ничего тут не поделаешь.

Возможное решение: кастомно ставить класс .hover под элемент, над которым находится мышь:



$(function () {
    $('.your-class').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 0,
        speed: 4000,
        pauseOnHover: false,
        cssEase: 'linear'
    });
    var lastCoordinates = [0, 0];
    $(document).off('mousemove').mousemove(function (e) {
        lastCoordinates = [e.pageX, e.pageY];
    });
    $(document).on('touchmove', function (e) {
        //lastCoordinates = [e.pageX, e.pageY];
    });
    setInterval(function () {
        $('.hover').removeClass('hover');
        var element = $(document.elementFromPoint(lastCoordinates[0],
            lastCoordinates[1]));
        if (element.closest('.your-class').length) {
            element.addClass('hover')
        }
    }, 100);
});
.your-class div {
    display: block;
    height: 100px;
    width: 800px;
}
.your-class div.hover {
  -webkit-box-shadow: 0 20px 55px 13px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 20px 55px 13px rgba(0, 0, 0, 0.2);
	box-shadow: 0 20px 55px 13px rgba(0, 0, 0, 0.2);
}





  
aaaaa aaaaaaa
  
bbbbb bbbbbbb
  
ccccc ccccccc
  
ddddd ddddddd
  
eeeee eeeeeee
  
fffff fffffff
  
ggggg ggggggg
  
hhhhh hhhhhhh