Мы очень любим различные слайдеры и ротаторы на сайтах, по этому не могли обойти стороной. В данном уроке мы покажем как создать прекрасный полноэкранный слайдер с использованием HTML, CSS3 и jQuery. Вы можете использовать данный слайдер для презентаций продуктов на веб-сайте вашего магазина. В этом уроке мы используем Google Fonts, в частности такие шрифты как Montserrat и Oswald. Обязательно подключите данные шрифты к вашему документу перед началом работы. Давайте посмотрим, что же у нас получилось.

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

Шаг 1. HTML

Первый шаг — создать структуру HTML. Вот что нам нужно:

  • Меню навигации;
  • Структура div для слайдера с именем класса css-slider-wrapper;
  • Четыре слайда; у каждого есть такие элементы, как buttons/images/text;
  • Отображение слайдера;

В результате мы получаем следующую разметку:

Как видите разметка последовательная и не сложная, по этому давайте перейдем к следующему шагу.

Шаг 2. CSS

Во-первых, давайте добавим базовый стиль для структуры слайдера:

Теперь давайте создадим меню навигации; мы установим для него максимальную ширину с некоторыми дополнениями. Мы будем использовать flexbox для выравнивания элементов внутри.

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

Давайте также создадим слайды, общий класс, который мы применили, теперь мы применим класс для каждого слайда, также мы добавляем цветовую гамму для каждого слайда.

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

Теперь давайте сделаем слайд адаптивным.

Со стилями мы разобрались, как видите большая часть реализована с помощью CSS, теперь остались мелкие детали.

Шаг 3. JS

У нас есть еще одна вещь которую нам необходимо реализовать еще. Наш слайдер меняет слайды, когда мы нажимаем на навигационные точки. Мы будем использовать Javascript, чтобы заставить ползунок автоматически изменять положение. Обязательно подключите библиотеку jQuery, а затем добавьте эту строку в свой файл javascript.

В результате у нас получился крутой слайдер. Просмотрите демо и дайте нам знать, что вы думаете о слайдере в комментариях.

Вот и все. Готово!