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

 

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

Шаг 1. HTML

Для начала подключите таблицу стилей для плагина mistCarousel и другие необходимые стили CSS которые необходимы для нормальной работы слайдера:

Затем нам необходимо создать структура для нашей галереи, выглядеть она будет следующим образом:

Так как работу слайдера выполняет плагин, то давайте перейдем к следующему шагу, и рассмотрим его функциональность.

Шаг 2. JS

Подключите библиотеку JavaScript jQuery и скрипт плагина mistCarousel в нижней части веб-страницы:

Затем инициализируем сам плагин:

Параметры конфигурации со значениями по умолчанию:

arrows: навигационные стрелки;
autoPlay:  автозапуск;
autoPlaySpeed: интервал автозапуска в мс;
dots: навигационные точки;
readMoreText: подробнее;

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

Вот и все. Готово!