the last carousel you'll ever need

Hi Ken. Thanks for this awesome slider, I really like it. But this time I would really like to use it w/o jQuery. Do you think it is possible to port it to vanilla JS?

Cheers.

Hi Ken, First of all - great plugin, fantastic work, respect!

However, with the new feature "variableWidth" combined with progressive lazy load and centerMode, I encountered problems when having higher amount of image slides in the slick (ca 100+).

The width of "slick-track" element on first few calls to setDimensions seems to be miscalculated - track is slightly shorter than it should be, as the images while initializing do not give correct slide width to the slick.

The effect of this issue is fairly bad: slide-track expands for two rows (as the fully loaded images can not fit within miscalculated track width).

After while (when all progressive images are fully initialized), all is getting back OK, f.e. after first slide change all gets finally calculated correctly and slick is looking fine.

I did not have a time to dive deeper in your code, so i just created kind a dirty hack to fix it (see bellow), but I think this issue shall be addressed and get resolved more elegant way.

The merit of my hack is simple:

1. it simply checks the slick-track width on every call to setDimensions, and compares previously calculated width with the newly calculated. if it differs (width changes as the lazy loading images still continue initializing), it sets the track width manually for INSANE value, e.g. 500000 (to surely accommodate all slides).

2. Once slick-track width stabilizes (previously calculated width equals to new), all returns to normal and manually setting the insane width is bypassed. Track has correct width, and looks good.

As the process is quite quick, the hack does not have any bad influence on initial display, the slick simply starts "fixed" as it would normally, but it is really dirty hack. ;-)

THE HACK

First, I created new var for storing the slick-track width (at line ca 144): _.lastTrackWidth = 0;

Than, I modified the setDimensions method, inside >variableWidth === true< condition (line ca 1335):

    } else if (_.options.variableWidth === true) {
        var trackWidth = 0;

        // *** edit
        // *** HACK for miscalculated track width while progressive lazyLoad (wrong slide widths)
        if (_.options.lazyLoad == "progressive" && _.$slideTrack.width() !== _.lastTrackWidth ) {
            trackWidth = 500000;
        }
        // *** END edit

        _.slideWidth = Math.ceil(_.listWidth / _.options.slidesToShow);
        _.$slideTrack.children('.slick-slide').each(function(idx){
            trackWidth += Math.ceil($(this).outerWidth(true));
        });
        _.$slideTrack.width(Math.ceil(trackWidth) + 1);

        // *** edit
        // *** HACK for miscalculated track width while progressive lazyLoad (wrong slide widths)
        _.lastTrackWidth = Math.ceil(trackWidth) + 1;
        // *** END edit

    } else {

Please, I am sure you will have better idea, and I hope in a mean time the above may help somebody to resolve this issue in a dirty way, before fixed in source.

Thanks

Any plans to offer a smooth and continuous scrolling option? Sometimes one doesn't want an arrow for interaction, but just to have everything scroll by like a ticker tape.

I use Slick on therainbowroll.com and it works like a charm except for one weird bug on Chrome (or Chromium). For some reason, subsequent slides render at 1px high, making them essentially invisible. This is probably a Chrome bug since it works wonderfully on Safari & Firefox, but I still wanted to see if anyone has a way to avoid this.

Here's how I configure Slick:

$(document).ready(function () {
  $('.images').slick({
    dots: true,
    slide: 'img',
    lazyLoad: 'progressive',
    responsive: [
      {
        breakpoint: 760,
        settings: {
          arrows: false
        }
      }
    ]
  });
});

Anyone seen this before? Is there a fix?

I have a slider with four elements, at a screen size greater than a certain breakpoint, I'd like to disable slick and use CSS to render them as a 2x2 block grid. Is there a way to do this, or can it be added so you can have something like

$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        unslick: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});

I'm not sure that this is easily fixable but I'm implementing Slick on a Bootstrap website and I have a Slick-based gallery in a set of Bootstrap tabs. If the gallery tab is the active one on page load, the Slick carousel works fine, but if the gallery tab is not the one that's active on page load the Slick carousel seems to break (the tab basically looks empty).

At a guess this is due to the items being hidden as Slick is set up against the items and so Slick can't calculate the dimensions of the slides, etc.

A possible non-Slick-based fix is to hook into BS tab event system and only call $.fx.slick() when the tab is first switched to. Of course this only works for JavaScript components that allow a developer to hook into this kind of event system, so maybe there's a way for Slick to get round this limitation without requiring developers to do these hackish bits of code (which they sometimes may not be able to do).

I'm unable to destroy a slick instance. Calling $('.your-slider').unslick(); returns Uncaught TypeError: Cannot read property 'parent' of null on line 575 of slick.js. It would appear $slides is undefined. Is anyone else seeing this issue?

I love this slider but I am wondering if it's possible to have smooth scrolling where the slider stops wherever you stop scrolling at, rather than it snapping to certain images. I have tried playing around with the 'SlidesToShow' and 'SlidesToScroll' settings but on mobile devices it still seems to skip or cut off images with the snap function based on the format of images in each slider (I have a bunch of sliders with different format/size images). Is there any way to edit the code so it functions similar to this example - http://www.xtcdesign.com/pages/serenity-kitchen.php - where it's just a smooth scroll based on the mouse/touch scroll. Thank you.

If the slides are made of up linked images, when swiping through them on the iOS Simulator on OS X Yosemite, when the slider has finished swiping, the link that has been clicked initially will start to load.

This is an undesired effect, and should require the user to tap again (and not swipe) to activate the link.

Is this a bug? I know RoyalSlider operates like how I think it should...

HI Ken,

Great Slider, and thanks for sharing :-) although i have some issues that i hope you can help me with.

Im using the Slick-Slider as part of a responsive website. the problem is when you resize the browser the content panels in the slider will not swipe and gets stuck (this could also happen when going between portrait and landscape on a device). The ideal solution would be for the content panels to reset when resizing the browser to full width again. Do you have a solution for this?

Also I would like to centre all the content panels without having it in "Centre mode". is there a setting for this?

Many thanks in advance Matt

Slick is working great for me in the suggested configurations on all of the browsers I've tested, but when I put a slider inside a flexbox grid, Firefox messes it up.

I traced through the code, and it appears that even though a user might be resizing the browser and making it smaller, Firefox is returning larger and larger values for $list.height() and $list.width() when they're called in setDimensions().

I've set up a jsfiddle reproducing the problem. The first slider "main" is outside of the flexboxes, and works fine on all browsers. The second slider "nestedSlider" is inside the flexbox grid and displays correctly for me in Chrome and Safari (on OSX) and on my iPhone - and resizing the browser results in a properly resized slider. However, in Firefox, when you resize the browser, the slider just gets larger and larger.

http://jsfiddle.net/ronwild/qxkqzjow/5/

Is there any way to work around this?

Thanks

short description of the bug / issue, provide more detail below.

====================================================================

The issue https://github.com/kenwheeler/slick/issues/3059 has been solved in master branch but there is no new tag with the fixes.

====================================================================

Steps to reproduce the problem

1. In the latest tag v1.8.1 minified js version, the single dot appears if there is only one slide.

short description of the bug / issue, provide more detail below. when you click on the last time in the list the vertical slider move to the top and become disappear

====================================================================

[ paste your jsfiddle link here ]

https://codepen.io/mohomedanees/pen/KKeRqRV

use this jsfiddle to reproduce your bug: http://jsfiddle.net/simeydotme/fmo50w7n/ we will likely close your issue without it.

====================================================================

Steps to reproduce the problem

1. Click on 2023 https://watch.screencastify.com/v/O826TlhkpJNBU6iYWxFf
2. Then you will see the whole slider moves to the top and hidden

====================================================================

What is the expected behaviour?

When you click on a year it should move to the center vertically ...

====================================================================

What is observed behaviour?

...

====================================================================

More Details

• Which browsers/versions does it happen on?
• Which jQuery/Slick version are you using?
• Did this work before?

short description of the bug / issue, provide more detail below.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/>


$(".ez-slick-container").slick({
  infinite: true,
  slidesToShow: 4,
  slidesToScroll: 4,
  arrows: false,
  autoplay: true,
  autoplaySpeed: 3000,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});

I made this code but, the responsive is not working on my end.

I have a carousel with 5 slides, i need to show all 5 with center mode ON and for them to slide, because i display something only on the center slide.

Is there a way to do that?

short description of the bug / issue, provide more detail below. Hey. I've element inside the slider slider element that has click event that is not working on mobile. Do you know what is the issue? I'm trying to add a tooltip inside the slick slider ====================================================================

[ paste your jsfiddle link here ]

use this jsfiddle to reproduce your bug: http://jsfiddle.net/simeydotme/fmo50w7n/ we will likely close your issue without it.

====================================================================

Steps to reproduce the problem

1. ...
2. ...

====================================================================

What is the expected behaviour?

...

====================================================================

What is observed behaviour?

...

====================================================================

More Details

• Which browsers/versions does it happen on?
• Which jQuery/Slick version are you using?
• Did this work before?

Getting "unable to preventdefault inside passive event listener invocation" alert on Chrome Dev Tools console when swipping the Caroussel in Mobile / Device mode / view

What is the expected behaviour?

... Swapping slicks without any console alerts.

====================================================================

What is observed behaviour?

... Caroussel works as intended except I'm getting that error message on swipe.

====================================================================

More Details

• Which browsers/versions does it happen on? Google Chrome
• Which jQuery/Slick version are you using? 3.6.0 // 1.8.0