Slick slider infinite не работает

Infinite: true not looping correctly #2234

Comments

ehansen723 commented Apr 5, 2016

Given a slider with 10 items, slidesToShow = 5, slidesToScroll = 3, and infinite = true,
When I reach the end of the slider (viewing items 07 08 09 10 01)
When I click the «Next» arrow
I see items 06 07 08 09 10 instead of items 10 01 02 03 04

[ http://jsfiddle.net/n195kyfz/ ]

Steps to reproduce the problem

1. Create a slider with 10 items
2. Set slidesToShow to 5 and slidesToScroll to 3 (main setting)
3. Set slidesToShow to 3 and slidesToScroll to 2 (responsive, breakpoint 850)
4. Set slidesToShow to 2 and slidesToScroll to 1 (responsive, breakpoint 425)
5. Load in a viewport > 850px wide
6. Click the next arrow 3 times

What is the expected behaviour?

Page load shows items:
01 02 03 04 05

«Next» Click 1 shows items:
04 05 06 07 08

«Next» Click 2 shows items:
07 08 09 10 01

«Next» Click 3 shows items (expected):
10 01 02 03 04

What is observed behaviour?

Page load shows items:
01 02 03 04 05

«Next» Click 1 shows items:
04 05 06 07 08

«Next» Click 2 shows items:
07 08 09 10 01

«Next» Click 3 shows items (actual):
06 07 08 09 10

More Details

• Which browsers/versions does it happen on? Firefox, Chrome, possibly others. Only happening on desktop but might have to do with my responsive slidesToShow/Scroll settings.
• Which jQuery/Slick version are you using? jquery-rails (

> 3.1.2), Slick Version: 1.4.1

Did this work before? Unknown, haven’t tried a multi-item infinite carousel before

The text was updated successfully, but these errors were encountered:

leggomuhgreggo commented Apr 7, 2016

I made an even more reduced test case to confirm.

Man infinite is so tricky.

RadGH commented Apr 12, 2016

I’m having this issue also. I’m guessing there’s some errors in the math with a combination of infinite and scrolling a specific number of pages. I have the same results with:

.slick( <
slidesToShow: 6,
slidesToScroll: 4,
infinite: true
>);

DividingByZero commented Aug 16, 2016

I can confirm this same issue. Doesn’t look like this has been updated.

infinite: true,
slidesToShow: 4,
slidesToScroll: 2,

with an odd number of slides (like 5) it gets out of wack after the first slide. If I bump the number of slides to an even number, it works fine (like 6).

shivanit2 commented Jul 26, 2018

Any solution to this?

jaredshaunsmith commented Aug 8, 2018

this is also a problem for me. can confirm that it only happens when there is an odd number of slides, using infinite: true , and centerMode: true

semy commented Aug 8, 2018

Any News regarding this issue @leggomuhgreggo ?

ShellyB734 commented Aug 30, 2018

I am having the same problem.

i-am-al-x commented Nov 22, 2019 •

I can refine the problem description, and suggest a workaround.

I observed this problem when the total slide count is not an even multiple of ‘slidesToScoll’. The work-around is to remove slides until slide_count % slidesToScroll === 0. See also more detail and my warning against ‘slickAdd’ usage at my comment on issue #3841 ; which addresses the same issue.

Источник

Не работает slick слайдер, почему?

Всем привет. Все сделал как в документации, но он почему то не работает.. Причем вроде как подключился, но криво. Один из элементов вылазит слева страницы, причем его можно листать, но он не листается, от начала до конца страницы только двигается.. Потом вообще исчезает.. Что не так с этим слайдером?

• Вопрос задан более трёх лет назад
• 4684 просмотра

1 что надо всегда делать, это смотреть на ошибки в консоле, но допустим их там нет, тогда:

Почему тема перед основными стилями?

Убедитесь что $(‘.single-item’) находит, например так:
console.log($(‘.single-item’).length);
выведет в консоль 1 если все ок.

тут явно одна строка лишняя

ну и да, вызывать слик после модалки, причем не просто после модалки, а по событию окно построено. погуглите немножко, все есть там.

для скрытых блоков слик не пашет, это так со всеми слайдерами будет, увы и ах))) или пишите свой слайдер, теоретически можно и на скрытых делать, но будет топорно выглядеть.

Источник

Как решить проблему с отображением слайдера Slick?

Здравствуйте, проблема такая.

Есть два таба, в обоих табах есть слайдер slick.

В первом табе все ок, слайдер работает. Переключаемся на второй таб, там слайдер работает, только не показывает картинки. Если нажать на стрелочку или изменить размер окна они появятся.

Подскажите как можно сделать так чтобы картинки появлялись сразу.

• Вопрос задан более трёх лет назад
• 15789 просмотров

ohikoshimi, Ещё вариант есть, инициировать слайдер повторно, при открытии модального окна, тогда он начинает пересчёт параметров и открывается с обновлёнными данными.
К примеру, так:

Как видишь, событие нажатия вызывает модальное окно (у меня открытие модальки происходит в другой функции, а тебя должно быть по своему, или в этой дописать код), проверяет открыто ли (visible) и производит действия после заданного времени. Время должно быть не меньше того, сколько отводится на открытие модального окна.

Источник

slick slider — css transition infinite loop bug

I’ve got a slider set up using slick slider. When using the next and previous buttons, the item comes in to view with a nice transition. The problem I’m having is that when it restarts its cycle, the first item «snaps» into view, instead of doing the transition. Furthermore it seems like it loses it’s internal indexing, as the css «odd» and «even» classes are changed. See snippet below:

I think I know why it’s doing this, it’s because it has to create «cloned» items for the infinite loop functionality to work. I’ve tried a few different slider plugins and they all seem to have similar issues.

Does anyone know how I can fix this? jsfiddle here: https://jsfiddle.net/7kdmwkd9/1/

7 Answers 7

Solution 1 — Use Flickity

If you want to try another carousel control, you can have a look at Flickity. According to my tests with the wrapAround option, it does not «snap» the first item back into position when the full cycle is complete; the transition goes on smoothly. You can see it at work in this jsfiddle.

As for the problem with formatting the items according to their even/odd index, it happens only when you have an odd number of items. One solution would be to duplicate the list of items. Intead of

you could define

That would ensure that you work with an even number of items.

Solution 2 — Slick Slider: add transition delay

With Slick Slider, adding a delay to the transition helps to make it smoother when the cycle completes. In the code snippet below, I replaced:

@GSTAR, Eventually there is no error in your code but there is bit css and js flow you need to understand while using slick.

Slick is cloning your slides and amend in top and down of your slide. like describe below.

Your Code before Slick implementation

Your Code After Slick implementation

Also after adding this your animation code is working fine. but it can not visually visible. if you increase this animation time than it will not snaps your browser.

If you replace javascript code than you will come to know what is happening.

So after loop get finished and reaching to the first slide animation executed and before reach it get finished.

Please check below my snippet.

In infinite loop you have user odd and even css so as per the loop it your next first slide(cloned slide) has green color but your original slide(first slide) has red color hence it flicking color also. If you use number of slides in %2 , then this will not happen.

Hope it will help you to understand better.

This is not an issue, it’s a feature — this is just how slick slider (and most of other infinite-loop sliders) works. Basically, if slider would only clone divs it would end up with a huge performance issue, thus in certain places (beginning/end) after animation it rerender whole thing to start over.

If you are interested here is a proof-of-concept of slider that is based on transition and does not clone anything, just changes positions. Also maybe there is possibility to achieve the same with order — haven’t tried but thought about it now.

Источник

Как решить проблему с отображением слайдера Slick?

Здравствуйте, проблема такая.

Есть два таба, в обоих табах есть слайдер slick.

В первом табе все ок, слайдер работает. Переключаемся на второй таб, там слайдер работает, только не показывает картинки. Если нажать на стрелочку или изменить размер окна они появятся.

Подскажите как можно сделать так чтобы картинки появлялись сразу.

• Вопрос задан более трёх лет назад
• 15789 просмотров

ohikoshimi, Ещё вариант есть, инициировать слайдер повторно, при открытии модального окна, тогда он начинает пересчёт параметров и открывается с обновлёнными данными.
К примеру, так:

Как видишь, событие нажатия вызывает модальное окно (у меня открытие модальки происходит в другой функции, а тебя должно быть по своему, или в этой дописать код), проверяет открыто ли (visible) и производит действия после заданного времени. Время должно быть не меньше того, сколько отводится на открытие модального окна.

Источник