Estoy usando la mancha de control deslizante para mostrar imágenes. En el momento en que lo tengo, así que usted puede haga clic en en la barra de navegación y cambia la imagen principal de la pantalla.

Estoy tratando de conseguir que se establece el seleccionado de navegación en un evento hover o evento mouseover.

Este es mi código actual para la navegación y visualización:

$('.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
});

y este es mi violín

Es posible enlazar un evento mouseover a slick?

InformationsquelleAutor hdzillar | 2015-10-02

2 Comentarios

  1. 5

    Debería ser posible. Nunca se utiliza mancha de antes, pero en la primera vista se ve como una función de desplazamiento no está implementado. He creado un rápido enfoque básico de cómo se puede resolver esto con slick métodos proporcionados. Ver el violín.
    Usted debe optimizar la obtención de la mancha de objeto, es sólo un punto de partida para usted.
    También se debe romper la reproducción automática cuando se pasa el mouse y reiniciar, sólo tratar todo con la mancha dada métodos.

    $('.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);
    
    });

    Trabajo de violín

    • Gracias Hyde. Esto funciona perfectamente
    • Sólo me preguntaba ¿por qué utilizar mouseenter más de mouseover. A veces tengo un retraso cuando se mueve el ratón arriba y abajo de la lista
    • creo que el retraso ocurre cuando la función de reproducción automática activa mientras se cierne, es por eso que me dijo usted debe aplicar de la mejor manera de hacer una pausa de la reproducción automática y reiniciar, así que esto no puede suceder
    • y para contestar tu pregunta utilizando mouseenter más de mouseover, a veces es la mejor opción, debido a la propagación de los eventos. consulte api.jquery.com/mouseover para más información. En tu caso concreto no debería ser un problema, pero estoy acostumbrado a mouseenter, en lugar de mover el ratón.
  2. 1

    El uso de la respuesta anterior como base, yo era capaz de llegar con esta solución. Esto soluciona el problema al pasar el ratón por encima de navslide #1 a #3, y tener el control deslizante-para colgar en la diapositiva #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);
        }); 

Dejar respuesta

Please enter your comment!
Please enter your name here