Простой jQuery слайдер товаров для интернет магазина | Vladmaxi.net
ГлавнаяВеб-разработчикуJQueryПростой резиновый jQuery слайдер товаров для интернет магазина
Дата: 12.04.2013 в 18:48 | Просмотров: 8372

Простой резиновый jQuery слайдер товаров для интернет магазина

Простой jQuery слайдер товаров для интернет магазина
Скачатьбесплатно с сервера
Демодемонстрация

В сегодняшнем уроке мы хотим показать вам, как создать простой jQuery слайдер с CSS и анимацией. Идея была навеяна от Applle, где несколько маленьких элементов будут “летать” с анимацией подпрыгивания. Мы хотели, чтобы перевести эту концепцию современного вида для интернет магазина с минимально практичным дизайном, где элементы представляют собой различные товары или категории. Ещё также приглашаю посмотреть слайдер контента jquery с автоматической прокруткой. Итак, давайте начнем!

HTML каркас

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

Все, теперь перейдем к стилям! :)

CSS стили

Обратите внимание, что CSS не будет содержать префиксы, но вы найдете их в исходных файлах.
Что мы сделаем: сначала мы просто хотим сделать чтобы, первый элемент списка был показан пользователю, в то время как все остальные будут находиться за пределами области просмотра. Когда мы нажимаем на ссылку навигации, элементы будут либо задвигаться либо выдвигаться справа или слева, в зависимости от текущей позиции, на которой мы находимся.
Давайте сначала стилизуем обертку, с классом mi-slider. Она будет иметь определенной высоты, которая нам нужна для того, чтобы правильно установить положение ul:

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

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

Когда JavaScript выключен, мы ничего ничего не смотрим (мы используем Modernizr):

Чтобы сделать все элементы списка по центру, мы задаем для ul выравнивание текста text-align center, а также добавляем элементов списка inline-block display с шириной 20%. Эта ширина гарантирует, что наши товары впишутся в общую ширину слайдера.
По умолчанию, все элементы списка будут “уходить” с правой стороны. Мы используем 600% здесь, потому что это достаточная величина чтобы переместить их из окна. Мы также добавим немного прозрачность (opacity):

А также без JS:

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

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

Навигация должна быть в верху, потому что списки расположены абсолютно (absolution). Мы расположим навигационные ссылки по центру, добавив боковой margin: auto, а также установим максимальную ширину 800px:

Мы не хотим, показывать навигацию везде, если нет JavaScript:

Навигационные ссылки будут иметь хороший отступ (padding) и мы добавим им прозрачность (opacity) при наведения:

Класс mi-selected и mi-current класс списков, мы будем устанавливать с помощью JavaScript.
Теперь, давайте добавим маленькую стрелочку. Мы будем использовать псевдо-классы :before и :after после создания двух треугольников с границами:

Скучный урок получился, но мы добрались к самому интересному – анимации.

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

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

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

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

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

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

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

Со стилями все. Теперь давайте настроим некоторые вещи, связанные с jQuery.

JAVASCRIPT

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

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

И вот у нас все получилось и мы создали слайдер товаров! Я надеюсь этот урок был Вам полезен!

Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tympanus.net
Перевел: Владислав Бондаренко


ВСЕ КОММЕНТАРИИ

    1. Добрый день!
      Слайдер очень понравился и захотел прикрутить его к интернет магазину на Prestashop, но вот вопрос – А как администрировать такой слайд?
      Моно ли его прикрутить к какой-либо категории, чтобы он автоматически выводил товар из нее?
      Или все нужно делать ручками?

      1. Влад Бондаренко (Admin):
        http://vladmaxi.net

        Здравствуйте, Олег! Данный слайдер изначально не предусматривает администрирование через какую-либо CMS, поэтому его нужно дорабатывать. Думаю, вам стоит обратиться в веб-студию или написать на фрилансе, где с радостью всё сделают. Желаю успехов!

    1. Андрей:
      http://s1109885.storeland.ru/ @

      Отличный слайдер, но вот почему то сам слайдер отображается а перехода между категориями нет((. Т.е он просто стоит на первой категории (Ботинки) и все. Если не трудно, можете подсказать почему?
      Спасибо.

    1. Андрей:
      @

      Все, решено

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