Как добавить функциональность слайдеру на css?

Question

[sergey90123]

https://codepen.io/sergey112/pen/dyMvWPm

Можно ли как то добавить так кнопки, что бы слайдер так же переключался и при нажатии на них ?(ну и соответственно что бы на кнопках которые сверху тоже менялось текущее расположение элемента)

Comments

[Ankhena]

Можно ли как то добавить так кнопки что бы слайдер так же переключался и при нажатии на них ?

Можно, добавить еще пачку инпутов.

ну и соответственно что бы на кнопках которые сверху тоже менялось текущее расположение элемента

К ним еще пачку селекторов в css, чтобы при выборе новых инпутов, лейблы от первых тоже красились.

Но, очень надеюсь, вы спрашиваете чисто теоретически и понимаете, что инпуты придуманы не для этого и что разумнее это делается на js.

[sergey90123]

Ankhena, C js я еще совсем совсем не дружу)

[Ankhena]

sergey90123, слайдеры пишут для тренировки, а обычно пользуются готовыми решениями, например, swiper.js

[sergey90123]

Ankhena, Не понял , а как сделать так что бы кнопки нажимались несколько раз ? Если я добавляю еще 2 инпута, то получается только на один слайд вперед и назад ?

(разве что классы поменяю на тот куда их вынесу)
#btn-4:checked ~ .slider-inner .slider-slides {
  transform: translate(-450px);
}

#btn-5:checked ~ .slider-inner .slider-slides {
  transform: translate(450px);
}

[Ankhena]

sergey90123, разумеется, один инпут будет переключать один слайд. Причем, еще надо что-то делать с обратным направлением листания :)
Главное, учтите, что обычно верстальщику неизвестно сколько слайдов будет в слайдере.

https://obninsksite.ru/blog/html-and-css/156-slajd...

[sergey90123]

Ankhena, Спасибо

Answer 1

[Mike Derzynsky]

Пожалуйста, уберите это порн* и используйте JS. Один из лучших слайдер это библиотка Slick-slider.

Answer 2

[lagudal]

ну если очень надо на чистом css, в том же codepen поиск выдает туеву хучу результатов на запрос "pure css slider", хоть со стрелочками, хоть без - берите любой понравившийся и подстраивайте под свои нужды.
например вот или вот

Comments

[sergey90123]

Слишком много кода ,ужас какой то)