Сегодня слайдеры стали неотъемлемой частью многих сайтов: магазины, курсы, компании таким образом представляют свой товар или услуги. Для слайдеров существует множество реализация на JavaScript/jQuery, например, Swiper слайдер или Owl Carousel. Однако любой JS-код + CSS для слайдера, без которого такие плагины не обходятся, увеличивает время загрузки страницы, тогда как небольшой слайдер вполне возможно реализовать "своими руками" за счет использования только CSS.
В этой статье вы найдете 7 способов создания различных слайдеров, которые управляют смещением элементов на основе использования радио-кнопок, свойств Flexbox-модели, псевдоэлемента ::after, transform: translate(), свойств float + margin-left, clip-path, анимационных свойств transition или animation + @keyframes, а также ссылок и псевдокласса :target.
Итак, вот, что мы здесь рассмотрим:
- Способ 1. Простой слайдер со увеличением элементов с помощью свойств модели Flexbox
- Способ 2. Простой слайдер из 2-х фотографий с помощью псевдоэлемента ::after
- Способ 3. Переключатели + свойства Flexbox для слайдера + transform: translate()
- Способ 4. Переключатели + float для слайдов + margin-left
- Способ 5. Используем ссылки и псевдокласс :target для изображений
- Способ 6. Полноэкранный слайдер на основе свойства @keyframes
- Способ 6а. Слайдер на основе CSS JS и анимации типа @keyframes
- Способ 7. Слайдер на основе свойства clip-path
Способ 1. Простой слайдер со увеличением элементов с помощью свойств модели Flexbox
В этом способе мы изменим поведение обычного списка <ul> и вложенных в него элементов <li>, задав ему свойства Flexbox-модели и поменяв таким образом его внешний вид и поведение.
В этом примере свойство flex позволяет нам сделать слайдер только на основе свойств Flexbox-модели. Изначально мы задаем flex-basis как 25%, при наведении меняем его на 75%. А свойство flex-growпозволяет нам изменять размер слайда при наведении для небольших экранов в директиве @media.
See the Pen CSS Strip Flexbox Slider by Elen (@ambassador) on CodePen.0
Способ 2. Простой слайдер из 2-х фотографий с помощью псевдоэлемента ::after
В этом примере вы найдете карточку товара, в котором при наведении сменяется одна картинка на другую. Способ основан на том, что первое изображение находится в теге <img> и уходит при наведении вверх (псевдокласс :hover для родительского элемента) за счет свойства transform: translateY(-100%). Второе изображение является фоном для псевдоэлемента ::after и находится ниже блока с изображением, скрывающего все за счет свойства overflow: hidden. Он при наведении поднимается вверх, получая transform: translateY(0%).
Код примера вы найдете на вкладках HTML и CSS.
See the Pen CSS only product-slider with ::after by Elen (@ambassador) on CodePen.0
Способ 3. Переключатели + свойства Flexbox для слайдера + transform: translate()
Первый пример слайдшоу завязан на управлении радио-кнопками с помощью label и на свойствах Flexbox-модели, позволяющих располагать элементы в ряд. За счет того, что label связана атрибутом for с атрибутом id radio-элемента, при клике на label мы меняем выделенный элемент radio. А у этого элемента есть псевдокласс :checked, который можно отследить в CSS и привязать к нему некий код. Элемент label мы можем стилизовать, как нам захочется. В примере ниже он имеет вид небольших полосок с закругленными краями.
Это мы и делаем, назначая для #s2:checked ~ .slides изменения свойства transform: translate(), например:
|
1 2 3 |
#s2:checked ~ .slides{ transform: translate(-25%); } |
Тут используется родственный селектор, который позволяет добраться до элемента того же уровня ниже, чем указанный слева элемент.
Flexbox-модель позволяет нам выстроить все элементы-слайды в одну-линию и задать каждому 25% ширины родителя, тогда как сам родитель имеет 400% ширины относительно своего родителя и свойство overflow: hidden для того, чтобы спрятать выходящий за пределы рамки слайдера контент. Ну, и конечно, нам нужно свойство transition для плавного смещения слайдов.
Плюс мы можем использовать атрибут data-city для каждого <div class="slide">, чтобы потом вывести название города поверх картинки с помощью псевдоэлемента ::before.
Пример в действии.
See the Pen CSS Slider (input radio) by Elen (@ambassador) on CodePen.0
Способ 4. Переключатели + float для слайдов + margin-left
Слайдер, представленный ниже, работает на основе свойства float: left для слайдов. Это позволяет расположить элементы рядом с друг другом. Скрываются все элементы, кроме первого, за счет свойства overflow: hidden. Смещение происходит за счет изменения свойства margin-left, плавность задается, как и в предыдущем примере свойством transition.
С radio-кнопками здесь связаны не только label в виде точек под слайдером, но и label, которые управляют стрелками.
See the Pen CSS Slider (input radio) dots and arrows controls by Elen (@ambassador) on CodePen.0
Способ 5. Используем ссылки и псевдокласс :target для изображений
В этом способе никаких скрытых переключателей типа <input type="radio">. Их роль выполняют ссылки на элементы с id, стилизованные в виде кружков. А в самом слайдере мы видим изображения с заданным для каждого из них атрибутом id. За счет того, что клик по ссылке отображает элемент с определенным в ее атрибуте href id, мы добавляем именно для этого id свойство opacity: 1, задавая для остальных изображений opacity: 0, и небольшую анимацию сдвига слева направо за счет координаты left для абсолютно позиционированного изображения.
See the Pen CSS Slider with links and :target by Elen (@ambassador) on CodePen.0
Способ 6. Полноэкранный слайдер на основе свойства @keyframes
В этом CSS слайдере смена слайдов происходит автоматически за счет свойств animation и @keyframes imageAnimation, а для заголовков анимация задается в свойстве @keyframes titleAnimation (в коде вы найдете 2 вида анимации). Для каждого слайда указана своя задержка в свойстве animation-delay с шагом в 6s. Разметка слайдов сделана на основе списка.
See the Pen Fullscreen CSS Slideshow with animation by Elen (@ambassador) on CodePen.0
Варианты слайдера можно посмотреть здесь.
Способ 6а. Слайдер на основе CSS JS и анимации типа @keyframes
Еще один интересный слайдер предполагает разметку, основанную на смене слайдов с помощью свойств animation и @keyframes. В этом примере небольшой код JavaScript управляет перемещением элементов в "начало очереди", а за внешний вид отвечает всецело CSS.
See the Pen CSS + JS Slider with Title and Thumbnails by Elen (@ambassador) on CodePen.0
Большое разнообразие слайдеров как на CSS, так и на JavaScript, вы найдете в отдельной статье.
Способ 7. Слайдер на основе свойства clip-path
Слайдер использует свойство clip-path для показа следующего изображения. Управление основано на спрятанных с помощью CSS радио-переключателях и родственных селекторах. Изначально clip-path в виде круга (circle) размещен в нижнем левом углу и имеет нулевой размер. При клике на label этот размер увеличивается до 150% в процессе анимации и открывает следующее изображение.
See the Pen Image Clip-Path Animation with Sliders by Elen (@ambassador) on CodePen.0
Бонус
Для оформления навигации вы можете использовать разные кружочков и линий. Ниже можно найти идеи для своего кода.
See the Pen Demo: CSS Bullet Navigation Design by Naoya (@nxworld) on CodePen.0
