@onees

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

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

1й слайд: дотсы находятся между текстом и картинкой на равноудаленном расстоянии (всё ок)
62bae3c10f608448827670.jpeg
2й слайд: текста стало больше, текст наехал на дотсы (всё плохо)
62bae4d904458535513993.jpeg
  • Вопрос задан
  • 148 просмотров
Решения вопроса 1
inkShio
@inkShio
возможно у тебя прописана фиксированная высота слайда.
ну и смотри офф документацию там есть опция Adaptive Height, с примером.
Есть опция appendDots которая вставит тебе дотсы куда надо.
Можно сделать 2 слайдера. 1 слайдер будет текст + досты, а второй слайдер с картинками, при переключению текста будет меняться картинка. См в документации Slider Syncing.
Хорошая альтернатива слику - swiper.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы