Move Slick Slider gallery when mouse is on left or right side of page

Question

I am trying to get my gallery to move left when the mouse is on the left side of the page and move right when it is on the right side of the page. Here is the JSFiddle . I tried to use the hover function but it doesn't work. Mouseover seems to only work when you move the mouse over either on left or right side of the page and mousemove only seems to work when you move the mouse again. I would like it to still move (left or right) when the mouse is stationary (in either left or right side of page), or moved.

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

Answer 1

Set pauseOnHover: false, . Hope this helps!

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