Как сделать слайдер на css

Как создать стильный слайдер изображений на чистом CSS3

В этом уроке мы будем создавать слайдер изображений только с помощью CSS3. Свойства CSS3, которые мы будем использовать в этом уроке, работают только в последних версиях браузеров. Не рекомендуется использовать его в ваших профессиональных проектах, так как, возможно это не будет работать должным образом. Используйте это руководство просто для экспериментов с последними функциями CSS3.

Шаг 1 – HTML

Мы создадим два неупорядоченных списка, по одному для эскизов и один для изображений. Чтобы связать миниатюру с соответствующим изображением, мы будем добавлять идентификатор для каждого изображения.

Шаг 2 – Основной код CSS

На этом этапе мы создадим основной стиль слайдера. Для этого мы сбросим поля и отступы всех элементов слайдера, дадим им фиксированную ширину / высоту и положение.

Step 2

Шаг 3 – CSS3 Стиль

Теперь мы добавим Стили CSS3, чтобы слайдер выглядел лучше. Здесь мы будем использовать такие CSS3 свойства, как тени, закругленные углы и т.д. Обратите внимание, мы будем использовать различные префиксы для каждого браузера. Это необходимо потому, что эти свойства всё ещё в разработке в некоторых браузерах, и мы должны добавить префиксы, чтобы охватить их.

Step 3

Шаг 4 – Описание изображения

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

HTML

Чтобы создать бокс, добавим тег “span” с текстом для привязки.

CSS

Чтобы создать бокс , мы добавим фиксированную ширину, чтобы иметь возможность центрировать его на изображение, и добавим теней и градиентов , чтобы сделать его лучше. Чтобы создать стрелку только с помощью CSS мы будем использовать трюк с границей бокса .

Step 4

Шаг 5 – Переходы

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

Для создания переходов мы будем использовать @keyframes. Анимация создается припомощи постепенного изменения от одного набора стилей CSS к другому. Чтобы указать , когда анимация начнется, изменится и завершится, мы будем использовать проценты, тое-есть 0% – начало анимации и 100% – когда анимация завершена. Давайте начнем создавать эту анимацию ..

Сдвиг изображения слева

В начале анимации, изображение будет позиционированно с отрицательным значением (слева 500px), когда анимация завершается, изображение будет позиционироваться 0px слева. Установив длительность анимации до 1 секунды мы получим слайд эффект слева на право .

Сдвиг изображения справа
Сдвиг изображения сверху
Сдвиг изображения снизу

Внутреннее увеличение изображение

Для создания зумирующего перехода, мыбудем использовать трансформирующие свойства CSS3. В начале анимации изображение будет иметь размер в 10% и к окончанию вернётся к своему оригинальному размеру. Мы поместим его с отступом в 4px сверху, чтобы исправить пробел, который появляется в нижней части.

Вращение и увеличение изображение

Внешнее увеличение изображение

Шаг 6 – Изображение “без цели”

При нажатии на новую миниатюру предыдущий активный слайд исчезнет, и появится последний во время перехода между слайдами. Чтобы исправить это , мы должны добавить нецелевой стиль с более высоким Z-индексом в новом переходе.

Шаг 7 – Первый видимый слайд

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

Шаг 7 – Загрузка слайдера

В этом шаге мы скроем анимацию при загрузке , потому что , когда загружается слайдер, он будет ждать 1 секунду, чтобы перейти к первому слайду. Если мы не хотим видеть этот переход, мы скроем его на 1 секунду .

Слайдер с меняющимися фото на CSS

Слайдер с меняющимися фото на CSS

Йеллоустоун — национальный парк и заповедник на северо-западе США. Он расположен на территории сразу трех штатов: Вайоминг (самая большая часть), Айдахо и Монтана.

Мальдивские Острова

Мальдивские острова – это огромный архипелаг островов вулканического происхождения и окружающих их коралловых рифов и лагун в Лаккадивском море.

Горы Шотландии

Шотландия — самая горная страна из составляющих Великобританию. Наиболее высокие горы находятся в западной части Грампианских горах.

Озеро Ирен
Немного о коде

На показ каждого слайдера выделяется 10 секунд, а всего их 4. Поэтому общая продолжительность анимации составляет 40 секунд. Это указывается в строках animation: slideanim 40s infinite и animation: zoom 40s infinite

Для каждого слайда отдельно устанавливается задержка, это классы .slideshow-item:nth-child(1) , .slideshow-item:nth-child(1) img и т.д.

Слайдеры на чистом CSS + бонусный слайдер

Слайдер на CSS

Слайдеры на CSS имеют некоторое преимущество перед слайдерами на Javascript. Одно из таких преимуществ — это скорость загрузки. Мало того что изображения для слайдеров используются больших размеров (если нет оптимизации под разные экраны), так еще и на загрузку скриптов тратится некоторое время. Но в статье Вы увидите только слайдеры на чистом CSS.

Вот что я нашел на сайте на тему слайдеров:

Если вы занимаетесь web-разработкой и есть желание сделать это профессией или перейти на следующий уровень, то посмотрите на эту школу и курс «Front-end разработчик» от Нетологии, и, в качестве альтернативы похожий курс от Skillbox «Front-end разработчик«. Особенное внимание уделите изучению преподавателей курса, от их зависит скорость вашего роста.

Как и в прошлых уроках, я рекомендую все примеры смотреть в браузере Chrome.

1. CSS3 слайдер изображений

Слайдер на CSS, который использует для навигации по слайдам радиокнопки. Эти радиокнопки находятся под слайдеров. Также помимо радиокнопок навигация осуществляется с помощью стрелок слева и справа. Чтобы следить за тем, какое изображение сейчас отображать — используются псевдоклассы :checked .

CSS3 слайдер изображений

2. CSS3 слайдер изображений с миниатюрами

В отличие от прошлого слайдера на CSS, здесь вместо радиокнопок внизу расположены миниатюры всех изображений, что также бывает удобно при создании галереи изображений. Изображения сменяются со своеобразным эффектом: плавно исчезают при увеличении.

CSS3 слайдер с миниатюрами

3. Галерея на CSS

А вот этот слайдер на CSS отлично подойдет для продающих страниц. Как правило, многие веб-разработчики при разработке лендингов (продающих страниц) размещают слайдер в самом начале, чтобы в первом экране (без прокрутки) посетитель сразу видел все выгоды, которые есть для него на этой странице. Помимо всего, этот слайдер является адаптивным, что также радует.

Галерея на CSS

4. Слайдер на CSS без ссылок

Сразу хочу заметить что этот слайдер не использует ссылок! По умолчанию кроме главного изображения (слайда) видны еще 2 слайда. Они расположены позади основного. Смена слайдов происходит в красивом режиме: сначала раздвигаются два слайда и по центру становится тот слайд, который затем станет главным. Затем слайд увеличивается и помещается впереди остальных.

Слайдер на CSS без ссылок

5. Адаптивный слайдер на CSS3

Еще один адаптивный слайдер, управление которого основано на радиокнопках. Чтобы посмотреть как этот слайдер будет смотреться на разных устройствах — Вы можете либо самостоятельно изменять окно браузера, либо на странице со слайдером есть специальные иконки разных устройств, кликая на которые, Вы увидите будет смотреться слайдер на компьютере, планшете или на смартфоне.

Адаптивный слайдер на CSS3

*** БОНУСНЫЙ СЛАЙДЕР ***

Кроме всех слайдеров, которые представлены выше, я хочу порадовать Вас еще одним. Этот слайдер отлично подойдет для создания галереи изображений. Словами не объяснишь то что он делает, поэтому лучше смотрите всё на видео:

Вывод

С помощью слайдеров можно красиво оформлять галереи изображений, размещая их более компактно, вставить слайдер в первый экран (часть страницы, которую видно без прокрутки) продающей страницы, чтобы сразу показать посетителю главные выгоды, которые он получит. Можно еще найти массу способ где и как можно применить слайдеры, но одно понятно точно — они несут пользу при правильном использовании.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *