3D слайдер на CSS3 и JQuery / 3 примера + автопрокрутка | Vladmaxi.net
ГлавнаяВеб-разработчикуJQuery3D слайдер на CSS3 и JQuery / 3 примера + автопрокрутка
Дата: 06.06.2013 в 00:21 | Просмотров: 8309

3D слайдер на CSS3 и JQuery / 3 примера + автопрокрутка

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

Сегодня я хочу поделиться с Вами тем, как создать 3D слайдер, с использованием 3D-преобразования из CSS3. Используя 3D-transforms, мы можем сделать простые элементы более интересными, разместив их в трехмерном пространстве, и создав красивый jquery слайдер картинок или любых других элементов.

Вместе с CSS3 transitions, эти элементы будут размещены в 3D-пространстве и будут иметь реалистичный эффект. Также мне ещё нравится эффект, который описан в статье “Портфолио JQuery слайдер изображений с пагинацией”.

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

Обратите внимание, что это будет работать только в браузерах, которые поддерживают CSS3 3D-преобразования.

как это работает?

Следующая HTML структура кода используется для слайдера галереи:

И инициализация слайдера с помощью небольшого кода Javascript:

Опции

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

Итак, ещё раз по настройкам:

  • current : 0, – слайд или изображение, которое появится по умолчанию при загрузке страницы, и станет на первый план;
  • autoplay : false, – включение / выключение автоматической прокрутки картинок, значение false – запретить, true – разрешить;
  • interval : 2000 – время задержки на картинке, задается в миллисекундах.

Изменить данные опции, Вы можете в файле jquery.gallery.js, строка 23.

На этом все! Пробуйте, экспериментируйте! Спасибо, что дочитали до конца, надеюсь вам понравилось, и Вы остались довольны. :)


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


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