Главная страница » Плагины » Необычный слайдер для сайта на jQuery и CSS3

Необычный слайдер для сайта на jQuery и CSS3

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

Шаг 1. HTML

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

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

<p class="mistify__slide-description">Всем привет!</p>

<h1 class="mistify__slide-title">Привет, меня зовут Ральф. Я тренер в сложных жизненных ситуациях. Как вы думаете, ниже правда?</h1>

</a><img class="mistify__slide-background" src="img/1.jpg" alt="bg"></div>

<h1 class="mistify__slide-title">Реальности не существует</h1>

</a><img class="mistify__slide-background" src="img/2.jpg" alt="bg"></div>

<p class="mistify__slide-description">Мой подход к коучингу-это минимальный диалог</p>

<h1 class="mistify__slide-title">Это может быть весьма полезным в жизни</h1>

</a><img class="mistify__slide-background" src="img/3.jpg" alt="bg"></div>

<h1 class="mistify__slide-title">Каждое ваше действие обречено на успех.</h1>

</a><img class="mistify__slide-background" src="img/4.jpg" alt="bg"></div>

</div>

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

Шаг 2. JS

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

1 2	<script src="jquery-3.2.1.min.js"></script> <script src="js/mistCarousel.js"></script>

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

1	$('#mistify').mistify();

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

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