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

Но что же делать в случае, если Вам необходимо сделать такой слайдер, но при этом выделиться среди остальных оригинальностью? Тогда данный урок будет весьма интересен. Мы рассмотрим как можно создать замечательный слайдер с 3D трансформациями. Идея состоит в том, что изображения в слайдере изменяются с различными объемными трансформациями.

Шаг 1. HTML

И так, приступим, для начала мы рассмотрим полную HTML-разметку, которая будет состоять с простого списка:

index.html

Все слайды заключены в элементы DIV с классом «slide». Обратите внимание, что мы должны создать такое же количество навигации элементов, как и количество слайдов. 

Шаг 2. CSS

Первый файл layout.css — это макет нашей демонстрационной страницы. Второй, chopslider.css- это настройки слайдера. Вы можете настроить их, как вы пожелаете. Сейчас файл содержит следующие стили:

chopslider.css

Шаг 3. JS

Последним шагом будет рассмотрение некоторых параметров js.

main.js

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.