Slick: dealing with pixel rounding for stacked responsive slider

[yamiko-ninja]

I am working on a slider that is 10 sliders stacked on each other to make a whole picture.

Because the sliders are responsive I am having an issue with sub pixel rounding. As you resize the page or scroll you can occasionally get a white space between the different slides.

Is there A way I can remove this by flooring the set sizes or something?

http://robert-parker.me/slider/index.php

[yamiko-ninja]

This is only in firefox.

[kenwheeler]

What version are you using

[yamiko-ninja]

1.5.0

[corbanbrook]

I get the same issue in chrome, my slide container is responsive and will occationally be a sub pixel number like 1007.44px wide and my inner slides will be 1007px wide. Which allows me to see the next slide peaking through 1px.

I can see that the .slick-list element has the correct 1007.44px width but the .slick-track element rounded down the slide size caclulation. It is set to 6042px wide (6 slides * 1007px) when really it should be 6044.64px wide.

[corbanbrook]

It makes sense why this is happening because JQuery width and height functions do not return sub pixel values and instead round the result.

To get the subpixel values you would need to use something like

element.getBoundingClientRect() 

Rather than converting all calculations to subpixels an easier solution would be to lock the root carousel element to a full pixel value when browser resizing is occurring.

[corbanbrook]

I solved it within my application by adding another resize event listener before i initialize the slick carousel. Something like:

$(window).on('resize', function() {
  carouselElement.width('100%').width(carouselElement.width()); 
});

This will fire before slicks own resize events and first allow the carousel to expand to 100% of the available width of its responsive container (this will be some sub pixel value) Then it immediately resets the width to the rounded width that jquery returns). Then slicks resize events fire and size the .slick-track and .slick-slide elements to fit within the parent. Reading and writing widths like this isn't good for page repaint/reflow but its a quick and dirty for now.

[enemyairship]

Nice workaround, corban. Same idea worked for me.

[jonscottclark]

Nicely done, corbanbrook, this works for me, despite adding some jank.

@kenwheeler Hopefully with 2.0 you can drop IE8 support and we can use getBoundingClientRect to get subpixel measurements?

[thomasklein]

+1

[ghost]

Found this thread with about same problem. My workaround is to set the container of the slider to nudge the slider over a pixel to hide the rounding. I guess this would only work if the surrounding layout works without the overflow.

.container {
    overflow: hidden;
}

.slider {
   position: relative;
   left: -1px;
   /* or right: -1px; */
}

It's not a true solution, and the web gods are probably crying, but it works and is better for performance than the redraw.

[jimmykane]

Hi why is this issue closed?

[Nikita-Sp]

The same issue. On vertical slider there is a pixel of prev slide on top of the current one.
Any ideas?

Thanks.

[Westy247365]

$(window).on('resize', function() {
carouselElement.width('100%').width(carouselElement.width());
});

Hi, sorry to bother you but where in the slick.js file is this code added please?