question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

If slidesToShow is more than one, slide width calc is incorect

See original GitHub issue

I am placing few divs inside slides and they come with a 1px border I also used this approach to separate the slides

.slick-slide {
    margin-left:40px;
}
/* the parent */
.slick-list {
    margin-left:-40px;
}

https://github.com/kenwheeler/slick/issues/582#issuecomment-61882540

now if slidesToShow are set at odd number the width of the slides is wrong and is not taking in count the inside div border , so the last item border is not visible and you can see this here ,

screenshot_4

or live example https://jsfiddle.net/fmo50w7n/346/

If I change the slidesToShow to 2 https://jsfiddle.net/fmo50w7n/347/

the division is ok and last item border is visible.

Now this is just an example of particular space between slides + border but my slick is going to be used by multiple users and I cannot guess if they will have the border inside and what size that border will be. Looks to me like the width calc is not taking everything in count or it simply cannot divide odd number properly so it rounds it up.,

Any help is appreciated.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:8

github_iconTop GitHub Comments

1reaction
leggomuhgreggocommented, Apr 27, 2016

Ohhh you know what this is? It’s the same as #2167.

I’m not 100% on the browser constraints related to this, but basically sometimes there’s a discrepancy between sildeWidth * slideCount and sliderWidth. Logged to the console in a modified version of your fiddle

Gonna keep the other one as the primary for this issue. Thanks @danyj

1reaction
leggomuhgreggocommented, Apr 27, 2016
Read more comments on GitHub >

github_iconTop Results From Across the Web

Slick slider gets wrong width - Stack Overflow
I have the same problem only on screens <768px with bootstrap4, slick (and owlCarousel) set width more then 10000px to there container.
Read more >
kenwheeler/slick - Gitter
First one is, I'm using slick as a carousel for a list of card-style displays, ... infinite: false, speed: 500, slidesToShow: 4, slidesToScroll:...
Read more >
accessible-slick - the last (accessible) carousel you'll ever need
A highly accessible, WCAG 2.0 / 2.1 compliant, drop-in replacement for Slick Slider (1.8.1) crafted and tested by expert users and professional ...
Read more >
https://www.aamu.edu/_resources/ldp/galleries/slic...
Unless `autoplay: true`, sets browser focus to current slide (or first of current slide set, if multiple `slidesToShow`) after slide change.
Read more >
Slick | Best of JS
Unless autoplay: true , sets browser focus to current slide (or first of current slide set, if multiple slidesToShow ) after slide change....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found