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

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

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

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

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

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

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

Опции

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

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

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

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

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

---

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