Слайдер контента JQuery и CSS3 + AutoPlay | Vladmaxi.net
ГлавнаяВеб-разработчикуJQueryСлайдер контента JQuery и CSS3 + AutoPlay
Дата: 12.05.2013 в 01:04 | Просмотров: 5048

Слайдер контента JQuery и CSS3 + AutoPlay

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

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

Наш любимый код HTML

Структура HTML состоит из основного div, который имеет класс называется rotator и простого маркированного списка ul, где мы добавим все элементы меню, заголовок и описание. Ссылка на полный контент, будет в конце описание. Вот пример 2-ух пунктов меню, которые мы будем использовать для заполнения содержания контентом:

Мы используем осмысленные названия для информации пунктов слайдера – info_image (изображение), info_heading (заголовок), info_description (описание). Фоновое изображение будет иметь исходный путь images/, нам нужно только прописать имя изображения.

Красивости CSS

Основной div с классом rotator, будет иметь следующие стили форматирования:

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

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

Ссылки имеют следующее форматирование, которое Вы можете, в принципе, задать на свой вкус и цвет:

С помощью свойства border-radius мы создаем асимметричный вид пунктов меню слайдера. Для текста будет создан эффект свечения при наведении на текст.

Хорошо, идем далее. CSS стили для заголовка и описания:

Со стилями все, теперь самое интересное, мы оживим наш слайдер с помощью JQuery.

Креативность JavaScript

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

Мы добавим это после всего содержимого, но до закрывающего тега body.
Затем мы добавляем этот скрипт, заключенный в теги script:

Вот и все готово! Если у вас что-то не получилось, не переживайте, скачивайте слайдер jquery по ссылку в начале статьи, и пользуйтесь. Надеюсь Вам понравилось и было интересно! :)


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


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