Carousel Fails to Align Right on Last Slide in Chrome (Slick 1.8.0, jQuery 3.6.0)

[smallma]

Short Description of the Bug / Issue Carousel does not align to the right edge when slid to the last item, resulting in unexpected extra space on the right.

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

[ CodePen Sample ]

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

Steps to Reproduce the Problem Open the provided CodePen link. Slide the carousel to the last item.

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

Expected Behaviour The carousel's last item should align flush with the right edge of the container upon sliding to the end.

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

Observed Behaviour There is an unexpected space on the right when the carousel is slid to the last item.

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

More Details The issue occurs on Chrome version 120.0.6099.234. Using Slick version 1.8.0 and jQuery 3.6.0. This issue has not been observed before as this specific requirement was not present earlier.

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

[chimok]

@smallma This is a very old plugin and it shouldn't be used anymore. For simple things you could only use CSS, for for complex i recommended swiperjs.

[smallma]

@chimok I don't think you are right. Because JQuery is very old, but still someone need it. Old is never we care about. Is good to use and easier to use.

[chimok]

@smallma It's not just because of jquery. I loved jquery 8-10 years ago, but indeed won't use it with the exception of very old projects. It just doesn't play well with ESM and modern Frontend. I was also forced to use slick.js for many years and i agree about "the last carousel you'll ever need". You really don't need it.

With modern CSS and a few lines Javascript you can build easily a simple slider. You can use css scroll snapping: https://css-tricks.com/practical-css-scroll-snapping/

How about one of this many alternatives? Maybe this one: https://github.com/dynamicweb/swiffy-slider Slick.js has so many issues that will never going to be fixed. You always fight with layout-shift and especially mobile issues. It still contains code & hacks for IE8+.

I think the author did a awesome work for a long time, but now I am very frustrated when I get 2-3 years old projects in my hands still using slick.js. Why? Isn't it 2024? Don't use it just because you always used it.

[smallma]

@chimok Your response does not fix anything. Just focus on Slick.js. No need to response any other useless info that I know. What I want to use is none your business. No need to tell me your faith or something, because this is not helpful.

[chimok]

@smallma Okay. I'm sorry then. I still think its not useless information, this is a well know bug that never will be fixed. Don't you see there are 201 open pull requests and 1.2K issues?

I had this some years ago, but i don't remember the exact fix anymore. Only remember it had something to do with the containers and the combination of some settings. I've looked at your codepen, it works if you remove variable width and set with CSS instead. I guess you found it out already? It just doesn't work well with responsive and use very, very old css (e.g. float instead flexbox like any other slider). Your codepen using slick.js v1.5.7??

I'm sorry if you found my reply rude, I was just frustrated because I had to fix a slick issues. After 2 hours I've decided to recreate it with something else and I hoped my comment helps others not wasting her time too. That's all. Good luck.

[smallma]

@chimok You're truly a very boring person. As I mentioned earlier, this is a discussion forum for Slick, not your promotional area. Wherever you're happily trotting your folk project, I don't care what changes you've made. Please stay on topic and refrain from answering with self-righteous replies. I've been writing code for over twenty years, so of course, I know which code is too old. But you might not understand. Fixing packages in old projects is often easier than using new ones, especially when it involves syncing thousands of projects.

[antogomi]

@smallma Hi, I have encountered the same problem as you mentioned. I have a slider with centerMode:true and when I reach the last element, both at the beginning and at the end, it scrolls more than it should.

[chimok]

@smallma I didn't promote anything. I have no public projects on github and the links aren't my projects. If it is so easy to fix instead recreate then show us the solution - After 3 months i guess you've done it.

[smallma]

@chimok I don't talk as much as you do, claiming to solve this by opening a branch. Where's the solution? The plugin you recommended is quite bad, it doesn't even pass basic A11y, let alone special styles. I think you should keep your mouth shut and go home.

[smallma]

@antogomi The person above keeps boasting that he can solve it and recommended a terrible plugin. Maybe he can give you sincere advice, but I believe it would be faster for you to rewrite it yourself. Some people only talk big but contribute nothing to the community, yet shamelessly claim they use private git. It's really amusing.

[chimok]

@smallma You're the one taking this so personal, i see it in a grey zone or beyond regarding github community rules.

As you know github issues is not i have a problem, write the code for me. Your problem is not my problem. I simply gave some hints how i fixed it almost 10 years ago. If you don't find it useful, no problem. Btw, I just picked some random sliders i've never used - i only want to say there are plenty of other solutions with regular updates.

If you really care about A11y, don't use sliders at all. But you know that, right? So lets really stop this!

[renanyudimt]

thank you @chimok for the advice, i was installing this lib and got a lot of errors, seems like this lib is dead