Создаем слайдер только на CSS

Сегодня слайдеры стали неотъемлемой частью многих сайтов: магазины, курсы, компании таким образом представляют свой товар или услуги. Для слайдеров существует множество реализация на 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.

Несколько более сложный пример, но принцип похож.

See the Pen No script accordion animation by Jakob Eriksen (@jakob-e) on CodePen.

Пример ниже имеет эффект волны при наведении и раскрывает изображение при клике. Здесь используются псевдоклассы :hover при наведении курсора, а также :active и :focus при клике. Кроме того, здесь использован CSS-фильтр grayscale.

See the Pen 3D wave animation by Elen (@ambassador) on CodePen.

Способ 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.

Способ 3. Переключатели + свойства Flexbox для слайдера + transform: translate()

Первый пример слайдшоу завязан на  управлении радио-кнопками с помощью label и на свойствах Flexbox-модели, позволяющих располагать элементы в ряд. За счет того, что label связана атрибутом for с атрибутом id radio-элемента, при клике на label мы меняем выделенный элемент radio. А у этого элемента есть псевдокласс :checked, который можно отследить в CSS и привязать к нему некий код. Элемент label мы можем стилизовать, как нам захочется. В примере ниже он имеет вид небольших полосок с закругленными краями.

Это мы и делаем, назначая для #s2:checked ~ .slides изменения свойства transform: translate(), например:

Тут используется родственный селектор, который позволяет добраться до элемента того же уровня ниже, чем указанный слева элемент.

Flexbox-модель позволяет нам выстроить все элементы-слайды в одну-линию  и задать каждому 25% ширины родителя, тогда как сам родитель имеет 400% ширины относительно своего родителя и свойство overflow: hidden для того, чтобы спрятать выходящий за пределы рамки слайдера контент. Ну, и конечно, нам нужно свойство transition для плавного смещения слайдов.

Плюс мы можем использовать атрибут data-city для каждого <div class="slide">, чтобы потом вывести название города поверх картинки с помощью псевдоэлемента ::before.

Пример в действии.

See the Pen CSS Slider (input radio) by Elen (@ambassador) on CodePen.

Еще один слайдер, но уже на основе постоянной анимации, смещающей фото. Основан на свойстве transform: translate(), но с более сложными стилями.

See the Pen CSS only infinate marquee by Chris Bolson (@cbolson) on CodePen.

Способ 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.

Способ 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.

Способ 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.

Варианты слайдера можно посмотреть здесь.

Способ 6а. Слайдер на основе CSS JS и анимации типа @keyframes

Еще один интересный слайдер предполагает разметку, основанную на смене слайдов с помощью свойств animation и @keyframes. В этом примере небольшой код JavaScript управляет перемещением элементов в "начало очереди", а за внешний вид отвечает всецело CSS.

See the Pen CSS + JS Slider with Title and Thumbnails by Elen (@ambassador) on CodePen.

Большое разнообразие слайдеров как на 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.

Бонус

Для оформления навигации вы можете использовать разные кружочков и линий. Ниже можно найти идеи для своего кода.

See the Pen Demo: CSS Bullet Navigation Design by Naoya (@nxworld) on CodePen.