2017-05-07 1 views
0

J'essaie de faire bouger ma galerie vers la gauche lorsque la souris est sur le côté gauche de la page et vers la droite lorsqu'elle est sur le côté droit de la page page. Voici le JSFiddle. J'ai essayé d'utiliser la fonction hover mais ça ne marche pas. Le survol de la souris semble ne fonctionner que lorsque vous déplacez la souris sur le côté gauche ou droit de la page et que la suppression de la souris ne semble fonctionner que lorsque vous déplacez à nouveau la souris. Je voudrais qu'il bouge encore (gauche ou droite) quand la souris est à l'arrêt (à gauche ou à droite de la page), ou déplacée.Déplacez Slick Slider gallery lorsque la souris est sur le côté gauche ou droit de la page

$('.carousel-one').on('mouseover', function(e) { 
 
    "use strict"; 
 
    var mouseSide; 
 
    if ((e.pageX - this.offsetLeft) < $(this).width()/2) { 
 
    $('.carousel-one').slickPrev(); 
 
    } else { 
 
    $('.carousel-one').slickNext(); 
 
    } 
 
}); 
 
$('.carousel-one').slick({ 
 
    arrows: true, 
 
    infinite: true, 
 
    speed: 500, 
 
    slidesToShow: 1, 
 
    centerMode: true, 
 
    variableWidth: true, 
 
    autoplay: true, 
 
    autoplaySpeed: 2000 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet" /> 
 
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script> 
 
<div class="carousel-one"> 
 
    <div><img src="http://lorempixel.com/400/200" alt="Image three"></div> 
 
    <div><img src="http://lorempixel.com/400/200" alt="Image one"></div> 
 
    <div><img src="http://lorempixel.com/300/200" alt="Image two"></div> 
 
    <div><img src="http://lorempixel.com/320/200" alt="Image four"></div> 
 
    <div><img src="http://lorempixel.com/400/200" alt="Image five"></div> 
 
    <div><img src="http://lorempixel.com/200/200" alt="Image seven"></div> 
 
    <div><img src="http://lorempixel.com/300/200" alt="Image six"></div> 
 
</div>

Répondre

0

Set pauseOnHover: false,. J'espère que cela t'aides!

$('.carousel-one').on('mouseover', function(e) { 
 
    "use strict"; 
 
    var mouseSide; 
 
    if ((e.pageX - this.offsetLeft) < $(this).width()/2) { 
 
    $('.carousel-one').slickPrev(); 
 
    } else { 
 
    $('.carousel-one').slickNext(); 
 
    } 
 
}); 
 
$('.carousel-one').slick({ 
 
    arrows: true, 
 
    infinite: true, 
 
    pauseOnHover: false, 
 
    speed: 500, 
 
    slidesToShow: 1, 
 
    centerMode: true, 
 
    variableWidth: true, 
 
    autoplay: true, 
 
    autoplaySpeed: 2000 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet" /> 
 
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script> 
 
<div class="carousel-one"> 
 
    <div><img src="http://lorempixel.com/400/200" alt="Image three"></div> 
 
    <div><img src="http://lorempixel.com/400/200" alt="Image one"></div> 
 
    <div><img src="http://lorempixel.com/300/200" alt="Image two"></div> 
 
    <div><img src="http://lorempixel.com/320/200" alt="Image four"></div> 
 
    <div><img src="http://lorempixel.com/400/200" alt="Image five"></div> 
 
    <div><img src="http://lorempixel.com/200/200" alt="Image seven"></div> 
 
    <div><img src="http://lorempixel.com/300/200" alt="Image six"></div> 
 
</div>

+0

Shridar qu'il fait toujours la même chose. Je veux que la galerie se déplace vers la gauche lorsque la souris est sur le côté gauche, même lorsque la souris est à l'arrêt. La même chose avec le côté droit. J'espère que cela élabore plus. – Dino

+0

Vous vouliez que les diapositives bougent même lorsque la souris est à l'arrêt. Donc, même si vous mouseOver, les diapositives bougent toujours. Vous vouliez que les diapositives continuent de bouger, n'est-ce pas? –

+0

Correct, donc lorsque l'utilisateur déplace la souris sur le côté gauche ou laisse la souris sur le côté gauche, la galerie doit se déplacer vers la gauche. La même chose pour le côté droit. – Dino