Простой слайдер товаров со множеством позиций

Как создать простой многопозиционный слайдер

От автора: учебник о том, как применив минимум дизайна, создать при помощи анимации CSS и jQuery простой слайдер товаров с категориями. Идея состоит в последовательном пролистывании элементов в зависимости от направления скольжения.

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

скачать исходникидемо

Разметка слайдера товаров

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Давайте рассмотрим стили.

CSS

Обратите внимание, что CSS не будет содержать никаких префиксов, но вы найдете их в файлах.

Мы собираемся сделать следующее: изначально нам требуется показать первый список элементов в то время, когда все остальные li будут смещены вправо, вне поля просмотра. При щелчке на навигационную ссылку элементы сдвинутся либо справа, либо слева, в зависимости от текущей позиции и того, какова заново выбранная категория.

Давайте сначала назначим стили обертке, которая является разделом с классом mi-slider. У него будет предопределенная высота, нужная нам для того, чтобы правильно установить расположение ul’ов:

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

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

При деактивированном JavaScript’е нельзя допустить разрушения дизайна (мы используем Modernizr):

Для центрирования элементов списка мы назначили ul’у выравнивание по центру, а теперь зададим отображение inline-block шириной 20%. Эта ширина гарантирует, что наши элементы будут подходить к списку.

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

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

Давайте назначим стили содержимому элементов списка. Обратите внимание, что мы устанавливаем максимальную ширину max-width изображений на 100%. Это гарантия, что разметка не нарушится, а изображения станут менять размер в соответствии со своей оберткой, которой является li с шириной в процентах:

При проведении мышью над элементом мы будем анимировать непрозрачность элемента списка:

Для навигации необходимо самое высокое значение, так как списки позиционированы абсолютно. Мы разместим навигацию по центру, назначив боковые margin-ы в auto и установив максимальную ширину в 800px:

Не нужно показывать навигацию, если JavaScript не активирован:

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

Класс mi-selected, совсем как класс списков mi-current, мы установим с помощью JavaScript’а.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Теперь добавим вверху маленькую стрелку. Для создания двух треугольников с границами воспользуемся псевдоклассами :before и :after:

Теперь перейдем к самому интересному – анимации. Первая – это масштабирование элементов первого списка. Анимация scaleUp также будет содержать элементы, смещенные на 0, так как нам нужно, чтобы они находились в области просмотра:

Давайте добавим каждому элементу списка разную задержку delay, чтобы те появлялись поочередно:

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

Для скользящей анимации нам понадобится четыре оболочки: две для появления новых элементов и две для убирания текущих элементов, в зависимости от направления. Так что для списков мы определим четыре класса с JavaScript:

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

Соответственно будут установлены увеличенные задержки:

А теперь назначим саму анимацию. Например, перемещение справа будет означать, что мы установим значение translateX на 600% и переместим до 0. При движении слева мы установим исходную позицию на -600% с тем, чтобы элементы, находящиеся слева, были вне области просмотра. И так далее:

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

Начнем с подгонки навигации, чтобы та не разрушалась при слишком маленьком экране:

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

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

Вот и все стили. Теперь проконтролируем кое-что с помощью jQuery.

JavaScript

Давайте создадим для своего слайдера простой плагин jQuery. Большая часть работы проделана в CSS, где мы определили всю анимацию. Плагин в основном будет нацелен на добавление и удаление классов, и контроль текущей показываемой категории. Для браузеров, не поддерживающих анимацию, мы вернемся к простому подходу show/hide.

Начнем с кэширования некоторых элементов и инициализации нескольких переменных:

Мы привяжем событие щелчка к ссылкам навигационной категории под слайдером. Допустим, что индекс каждой соотносится с индексом соответствующей категории (ul’а). При щелчке на ссылку категории элементы текущей категории убираются, а новой категории появляются один за другим (помните, мы определили в CSS задержку анимации).

Вот и все, мы закончили с вами создание простого слайдера товаров! Надеюсь, что вам понравился этот учебник, оказался для вас полезным и вдохновляющим!

Автор: Mary Lou

Источник: http://tympanus.net/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (8)

  1. Елена

    Автору спасибо за детально объяснение, остался вопрос — как пошагово встроить этот скрипт слайдера на сайт (в шапку сайта)? Я создала отдельную папку в корне сайта, загрузила туда все исходники, что дальше? Спасибо за ответ.

    • Данила

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

  2. prst

    Весь день убил, ничего не выходит. Появляются башмаки и прямая линия. Делал полный копипаст, нифига не работает! Ваш демо файл работает, копирую к себе код, правлю пути, и все перестает работать хотя 100% скрипты загружены и стили тоже. Не понимаю уже в чем дело, автор подскажи, может какие стили перебиваются или какие то пути в скриптах зарыты? Что должно быть неизменно чтобы эта карусель завелась???

    • Андрей Кудлай

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

      • prst

        Андрей, верно, вычислил ошибку, раньше времени психанул, вобщем в моем шаблоне подключение jquery шло в самом конце файла, видимо поэтому остальные скрипты и не срабатывали. Как же не хватает знаний по javascript…

  3. prst

    Андрей, последний вопрос, а можно как то сделать autoplay?

    • Андрей Кудлай

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

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree