Search code examples
javascriptslick.js

Slick Slider speeding up after mouse click on image


When clicking on an image within the Slick Slider all slides are moved forward with high speed. How to get rid of that behaviour?

My JS settings:

$(document).ready(function(){
    $('.sh_product_slider2').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      arrows: true,
      dots: true,
      centerMode: false,
      variableWidth: true,
      infinite: true,
      focusOnSelect: true,
      cssEase: 'linear',
      touchMove: false,
      prevArrow:'<button class="slick-prev"> < </button>',
      nextArrow:'<button class="slick-next"> > </button>',
               responsive: [                        
                   {
                     breakpoint: 600,
                     settings: {
                       centerMode: false,
                       variableWidth: true,
                       slidesToShow: 1,
                       slidesToScroll: 1,
                       autoplay: true,
                       autoplaySpeed: 2500,
                       pauseOnHover: false, 
                       pauseOnFocus: false,
                       arrows:false
                     }
                   },
               ]
    });
});


Solution

  • Im not sure but seems work according to your sample just override the css class

    .sh_product_slider2 .slick-slide:after {
      position: relative;
    }
    

    let me know if not works, thanks