Как сделать такие динамические дотсы в slick-slider?

Question

[onees]

Есть такой слайдер, его слайды состоят из текста и картинок (красный квадрат это картинка в данном примере), между текстом и картинкой находятся slick дотсы, количество текста может быть больше, может быть меньше, соответственно необходимо предусмотреть чтобы дотсы всегда подстраивались динамически под количество текста, чтобы никто ни на кого не налазил. Чаще всего в слайдерах дотсы или стрелки делаются позиционированием, но в данном примере позиционирование не помогает защититься от динамического изменения контента. Нужна идея того, как реализовать дотсы, которые будут сами подстраиваться под изменения содержимого слайда в слике.

1й слайд: дотсы находятся между текстом и картинкой на равноудаленном расстоянии (всё ок)

2й слайд: текста стало больше, текст наехал на дотсы (всё плохо)

Answer 1

[inkShio]

возможно у тебя прописана фиксированная высота слайда.
ну и смотри офф документацию там есть опция Adaptive Height, с примером.
Есть опция appendDots которая вставит тебе дотсы куда надо.
Можно сделать 2 слайдера. 1 слайдер будет текст + досты, а второй слайдер с картинками, при переключению текста будет меняться картинка. См в документации Slider Syncing.
Хорошая альтернатива слику - swiper.

Comments

[onees]

Никаких фиксированных высот.
Изначально пробовал с appendDots, казалось бы идеально, если я вставлю в слайд, между блоком с текстом и картинкой ещё один div блок и туда append'oм закину дотсы, но такой блок мне придётся создавать в каждом слайде, и значит что у меня в каждом слайде будет по 8 дотсов и получится 64 дотса в слайдере, что как бы вроде априори неверно, и когда я так сделал это напрочь сломало мой слайдер и я дальше не продвигал эту идею).
Только что попробовал реализовать 2 слайдера и через asnavfor связать их, при этом слайдеру который текст с дотсами накинул adaptiveheight и теперь дотсы сами отталкиваются от блока с текстом при этом толкая другой слайдер с картинками вниз, и получилось ровным счётом то что я и хотел, благодарю за идею!