Slick: Smooth scrolling/animation

[studio4]

If you try to create a smooth continuous scrolling variable width carousel of images the slider speeds up and slows down depending on the width of the image using the following settings:

'slidesToShow': 7,
'slidesToScroll': 1,
'autoplay': true,
'autoplaySpeed': 1,
'speed':8000,
'arrows': false,
'variableWidth': true

I can see why this is the case given the plugin is intended as a slider rather than a ticker. That said is it possible to create a new setting to enable scrolling speed to be independent of the individual slide width? e.g. contstantSpeed: true/false or perhaps variableSpeed: true/false

[simeydotme]

Seems like a very narrow use-case, I would be against bloating my website's code to satisfy your use case :smile:

why don't you override the Slick.prototype.animateSlide prototype yourself?

[studio4]

Fair enough, figured it was worth asking the question though. Thanks for responding.

[simeydotme]

You could also perhaps use onBeforeChange to calculate thre speed based on the width of the next slide, then use !important; to override the transition-duration :)

[studio4]

Just in case this is helpful for anyone else this is what I did - it's very specific to my scenario and the maths is a little sketchy but in the end it was quite simple:

  $(element).on('afterChange', function(event, slick, currentSlide){
    var constant = 150000;
    var retailerCurSlideWidth = $('.slick-slide[data-slick-index="'+currentSlide+'"] img').width();
    var newSpeed = constant/(40-(Math.sqrt(retailerCurSlideWidth)*1.5));
    $(this).slick('slickSetOption','speed',newSpeed,true);
  });

Hope someone else finds this useful.

[linksmith]

I solved this problem by resizing all the images by hand. Maybe not such a slim use case after all. Thanks for the code, i'll see if I can implement it.