Slick Curseur de liaison passez événement

Je suis l'aide de la nappe de curseur pour afficher les images. Pour le moment, je l'ai, donc vous pouvez cliquer sur la navigation, et elle change l'affichage de l'image principale.

J'essaie de le faire à l'ensemble sélectionné de la navigation sur un hover événement ou événement mouseover.

C'est mon code actuel pour la navigation et l'affichage:

$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
autoplay: true,
//trigger after the slide appears
//i is current slide index
afterChange: function (slickSlider, i) {
    //remove all active class
    $('.slider-nav .slick-slide').removeClass('slick-active');
    //set active class for current slide
    $('.slider-nav .slick-slide').eq(i).addClass('slick-active');
}
});


$('.slider-nav .slick-slide').eq(0).addClass('slick-active');

$('.slider-nav').slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    autoplay: true,
    dots: true,
    centerMode: true,
    focusOnSelect: true,
    vertical: true
});

et c'est mon violon

Est-il possible de lier un événement mouseover pour slick?

OriginalL'auteur hdzillar | 2015-10-02

  1. 5

    Devrait être possible. Jamais utilisé slick avant, mais sur la première vue, il ressemble à un hover fonction n'est pas implémentée. J'ai créé une base rapide approche de la façon dont vous pouvez résoudre ce slick méthodes fournies. Voir la tripoter.
    Vous devez optimiser l'obtention de la nappe de l'objet, c'est juste un point de départ pour vous.
    Aussi, vous devez en pause la lecture automatique lorsque vous passez la souris et de le redémarrer, juste essayer de autour de avec la nappe donné méthodes. 

    $('.slider-nav').on('mouseenter', '.slick-slide', function (e) {
var $currTarget = $(e.currentTarget), 
    index = $currTarget.data('slick-index'),
    slickObj = $('.slider-for').slick('getSlick');

slickObj.slickGoTo(index);

});

    Travail de violon

    Merci Hyde. Cela fonctionne parfaitement
    Je me demandais pourquoi avez-vous utilisé mouseenter sur passage de la souris. Parfois, j'ai un retard lors de bouger ma souris vers le haut et le bas de la liste
    je pense que le retard qui se passe lorsque la fonction de lecture automatique déclenche en vol stationnaire, c'est pourquoi j'ai dit que vous devriez mieux de mettre en œuvre une pause de la lecture automatique et de le redémarrer, de sorte que cela peut ne pas arriver
    et pour répondre à votre question en utilisant le mouseenter au cours du passage de la souris est parfois la meilleure option, en raison de remontée d'événements. voir api.jquery.com/mouseover pour plus d'info. Dans votre cas particulier, il ne devrait pas être un problème, mais je suis habitué à mouseenter au lieu de la souris.

    OriginalL'auteur hyde

  2. 1

    À l'aide de la réponse ci-dessus comme base, j'ai été en mesure de venir avec cette solution. Cela résout le problème rapidement lorsque le pointeur de la souris au cours de navslide #1 à #3, et d'avoir le curseur-pour raccrocher sur la diapositive n ° 2. 

    var slideTimer;
    $('.slider-nav').on('mouseenter', '.slick-slide', function (e) {
        var $currTarget = $(e.currentTarget);
        $('.slider-nav .slick-slide').removeClass('slick-current');
        $currTarget.addClass('slick-current');

        slideTimer = setTimeout(function () {
            var index = $('.slider-nav').find('.slick-current').data('slick-index');
            var slickObj = $('.slider-for').slick('getSlick');
            slickObj.slickGoTo(index);
        }, 500);
    }).on('mouseleave', '.slick-slide', function (e) {
        clearTimeout(slideTimer);
    });

    OriginalL'auteur Sara