You can check out this pure CSS slider on the folling link: https://eugenegarmash.github.io/pure-css-slider/ .
Вы можете просмотреть слайдеры по сследующей ссылке: https://eugenegarmash.github.io/pure-css-slider/ .
- Особенности слайдеров
- Слайдер №1: translateY() + "position: absolute". Блоку с переключателями задаем "z-index: 1", чтобы он перекрывал абсолютно спозиционированные слайды. Смещаем слайды в сторону с помощью "transform: translate()". По нажатию на переключатель, обнуляем смещение для нужного слайда, используя селектор последующих элементов (тильда: "~").
- Слайдер №2: "z-index" или "visibility: hidden" / "display: none". Задаём блоку с переключателями индекс 2 дл ятого, чтобы он перекрывал спозиционированные слайды (выбранному, с помощью всё того же селектора-тильды, слайду даём индекс 1). Через visibility none и display: скрываем слайды и показываем выбранный.
- Слайдер №3: "transform: translateX()" and "display: inline-block". Внутренней обёртке задаём overflow: visible. У слайдов статичное позиционирование, располагаются друг над другом. По нажажию, с помощью "~", перемещаем внутреннюю обёртку (.wrapper3__inner) на заданое для каждого слайда количество кпикселей вверх.
- Общий CSS для всех слайдов
- задаём общей обёртке высоту и ширину, а также "overflow: hidden"
- скрываем input'ы
- позиционируем label'ы относительно .wrapper
- при нажатии на какой-нибудь из label'ов, c помощью "~" задаём label'ам линейный градиент. Также отмечать выбранные слайд можно с помощью вседоэлемента, отражаемого по нажатию. В данных примерах я реализовал всё по первому сценарию
- для первого и второго слайдера задаём "position: absolute" слайдам.
- Общий HTML для слайдеров:
- общая обёртка .wrapper,
- input'ы,
- label'ы к ним в блоке .slider-controls ниже (чтобы ссылаться на них с помощью "~")
- обёртка для слайдов .wrapper__inner
- собственно слайды