.
.show-1 на .slider
Size: a a a
2020 September 26
.
исходя из
.
function slider(items = 1) {
querySelector('.slider').classList.add('show-'+items)
}
querySelector('.slider').classList.add('show-'+items)
}
.
ОЧЕНЬ например
.
А в slider рендеришь непосредственно изображения текущие для показа
.
а не все вместе
.
И то даже этот способ плохой с :nth-child
.
Лучше взять идею slick slider
.
но доработать с тем, чтобы не дублировать слайды
.
Там в целом принцип вроде такой:
пагинация и слайдер отдельно,
в слайдер кладутся теги
слайдер читает эти теги и запоминает это всё и может сам делить на количество элементов для показа
пагинация и слайдер отдельно,
в слайдер кладутся теги
слайдер читает эти теги и запоминает это всё и может сам делить на количество элементов для показа
МК
А в slider рендеришь непосредственно изображения текущие для показа
у меня сейчас скорее в первую очередь это просто разобраться в верстке. Я делаю это для себя и мне важно разобраться почему не получается, и как исправить. Просто использовать другой вариант конечно можно, но хочется понять в чем проблема тут. Почему не выводит как надо.
.
Показ делает с дублями для анимации
.
Прежде всего это то, что это флекс
.
Поставь базово значение для .slider
.
flex-wrap:wrap;
.
Все элементы в строке, что лишние по ширине скинутся на строку вниз
.
Если у тебя высота слайдера статична - overflow:hidden их скроет
.
Но это значение поможет тебе не писать это
.
Переслано от .
.show-1 > *:nth-child(n+2) {display:none}
.show-2 > *:nth-child(n+3) {display:none}
итд
.show-2 > *:nth-child(n+3) {display:none}
итд
.
И не будет проблем в шириной других item