Slick slider: навигация при наведении на точки

#javascript #jquery #slider #slickjs #slider_slickjs

При стандартной реализации,slick-slider перелистывается при клике, мне же необходимо,
чтобы слайды менялись не при клике на навигационные точки, а при наведении на них.

  $('#slider-1').slick({

      dots: true,
      arrows: false,
      fade: true,
      autoplay: false,

  }); 

    

Ответы

Ответ 1

Для переключения на конкретно заданный слайд можно использовать метод slickGoTo.

Синтаксис метода:

$('.your-element').slick('slickGoTo', index, [, dontAnimate]);


Параметры:


index - индекс слайда, на который будет выполнен переход. Целое число.
dontAnimate - пропуск анимации. Булево значение. Значение по умолчанию - false.




По умолчанию в качестве точек навигации плагин создаёт HTML разметку примерно следующего
содержания:


  

    
  

  



Событие mouseenter генерируются, когда курсор мыши переходит на элемент. В качестве
такого элемента я выбрал кнопку button: при наведении на неё меняется стиль курсора.

Ниже демка с использованием двух слайдеров.



$('.slider').slick({
  dots: true,
  arrows: false,
  fade: true,
  autoplay: false,

  // dotsClass: 'slick-dots'
});

$('.slider').on('mouseenter', '.slick-dots button', function(event) {
  $(this).parents('.slider').slick('slickGoTo', $(this).parent().index());
});
.page {
  max-width: 400px;
  margin: 2.5rem auto;
}





  

    
    
    
    
    
  

  

    
    
    
    
    
  







Ответ 2

Если бы меня попросили решить эту задачу в максимально сжатые сроки, я выбрал бы
подобное решение:

$('.slick-dots button').mouseenter(function (e) {
    var btn = $(this);
    btn[0].click();
});


Т.е. просто отлавливаем событие появления курсора мыши (mouseenter) над навигационным
элементом слайдера (.slick-dots button) и кликаем на него, повесив всю остальную работу
на Slick.

p.s.: накидал простой пример - https://jsfiddle.net/Denisdude/dkL312o8/23/