function slick() { $('.slider').slick({ // infinite: true, // // speed: 300, // centerMode: true, // adaptiveHeight: true // variableWidth: true, dots: true, infinite: true, speed: 300, slidesToShow: 1, // variableWidth: true, // centerMode: true, adaptiveHeight: true }); } function hover_slide() { var $Wslide = $('.slider').width(); var halfSlide = $Wslide / 2 ; var $button = $('.slider button'); console.log("halfSlide",halfSlide); $button.css( "display" , "block" ); $('.slider').hover(function() { $('.slider').mousemove(function(event) { var $eventX = event.pageX; if ($eventX < halfSlide) { $('button.slick-prev').css("opacity","1"); $('button.slick-next').css("opacity","0"); } else if( $eventX > halfSlide ){ $('button.slick-next').css("opacity","1"); $('button.slick-prev').css("opacity","0"); } }); }), $( ".slider" ).mouseleave(function() { $('button.slick-prev').css("opacity","0"); $('button.slick-next').css("opacity","0"); }); } var resizeTimer; $(window).on('resize', function(e) { clearTimeout(resizeTimer); resizeTimer = setTimeout(function() { hover_slide(); }, 250); }); $(document).ready(function(){ hover_slide(); slick(); });