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

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

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

Шаг 1. HTML

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

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

Слайдер с подпунктами для сайта с помощью jQuery RUDEBOX

Шаг 2. CSS

Нам необходимо определить общие стили для контейнера, который будет иметь класс mi-slider. Для него мы установим высоту, которая требуется для установки правильного положения элементов ul:

Нам необходимо перемещать пункты списка но при этом не сам список. Для этого установим для свойства pointer-events значение none, так как нам нужно чтобы на нажатие кнопки мыши реагировала ссылка текущего списка:

Теперь рассмотрим свойство pointer-events для текущего списка нужно обновить, чтобы ссылки в содержании стали доступны для нажатия:

Заданные значения по умолчанию устанавливают, что все пункты смещаются вправо. Для этого нам необходимо использовать значение 600%, так как его будет достаточно, чтобы убрать все из поля видимости. Также необходимо добавить небольшую трансформацию для прозрачности:

Теперь нам необходимо определить стили для содержимого пунктов списка. Следует заметить, что свойство max-width для изображений имеет значение 100%:

Создаем прозрачность при наведении курсора мыши:

Наш шаблон имеет абсолютное позиционирование, по этому навигацию устанавливаем со значением свойства top.

Если отключен JavaScript то выводить навигацию не требуется:

Анимация scaleUp также включает перемещение пунктов в координату 0, так как нам нужно вывести их в поле обзора:

Необходимо добавить каждому пункту различные задержки, чтобы они появлялись последовательно:

Теперь нужно установить задержки анимации в зависимости от направления движения.

Необходимо увеличивать задержки постепенно:

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

Последним подпунктом данного шага будет установка стилей так, чтобы ничего не скрывалось и все списки выводились один над другим:

С этим шагом закончили, перейдем к следующему.

Шаг 3. JavaScript

Мы будем использовать небольшой плагин jQuery. Данный плагин необходим для добавления и очистки классов, а также следить за текущей выводимой категорией. Для браузеров, которые не поддерживают анимации используется метод «показать или скрыть». Начнем с кэширования переменных:

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

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

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

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.