Все для веб-дизайнера
Необычный слайдер для сайта на jQuery и CSS3
Сегодня речь пойдет о слайдере, я давно не рассказывал о полноэкранных слайдерах, ведь они являются моими любимыми. Так что хочу исправить этот пробел и показать как сделать необычный слайдер, с интересными переходами, при помощи CSS3 и jQuery. Также нам понадобиться небольшой плагин mistCarousel который является экспериментальным плагином jQuery для полноэкранной карусели, также плагин обладает необычной фишкой, а именно эффектом перехода в виде тумана или дыма при каждом переходе между слайдами.
Как по мне, то смотрится очень интересно и свежо, а необычный эффект поможет вдохнуть жизнь в слайдер. Попробуйте у себя на сайте, ведь полноекранные слайдеры это всегда прекрасно. Попробуйте бесплатные шаблоны от наших партнеров:
Шаг 1. HTML
Для начала подключите таблицу стилей для плагина mistCarousel и другие необходимые стили CSS которые необходимы для нормальной работы слайдера:
|
1 2 3 4 |
<link rel="stylesheet" href="fonts/mfont.css"> <link rel="stylesheet" href="css/project.css"> <link rel="stylesheet" href="css/mistCarousel.css"> <link rel="stylesheet" href="/font-awesome.min.css"> |
Затем нам необходимо создать структура для нашей галереи, выглядеть она будет следующим образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div id="mistify"> <div class="mistify__slide"><a class="mistify__slide-content mist-link" href="page.html"> <p class="mistify__slide-description">Всем привет!</p> <h1 class="mistify__slide-title">Привет, меня зовут Ральф. Я тренер в сложных жизненных ситуациях. Как вы думаете, ниже правда?</h1> <p class="mistify__slide-timestamp">01 / 04</p> </a><img class="mistify__slide-background" src="img/1.jpg" alt="bg"></div> <div class="mistify__slide"><a class="mistify__slide-content mist-link" href="page.html"> <p class="mistify__slide-description"> </p> <h1 class="mistify__slide-title">Реальности не существует</h1> <p class="mistify__slide-timestamp">02 / 04</p> </a><img class="mistify__slide-background" src="img/2.jpg" alt="bg"></div> <div class="mistify__slide"><a class="mistify__slide-content mist-link" href="page.html"> <p class="mistify__slide-description">Мой подход к коучингу-это минимальный диалог</p> <h1 class="mistify__slide-title">Это может быть весьма полезным в жизни</h1> <p class="mistify__slide-timestamp">03 / 04</p> </a><img class="mistify__slide-background" src="img/3.jpg" alt="bg"></div> <div class="mistify__slide"><a class="mistify__slide-content mist-link" href="page.html"> <p class="mistify__slide-description"> </p> <h1 class="mistify__slide-title">Каждое ваше действие обречено на успех.</h1> <p class="mistify__slide-timestamp">04 / 04</p> </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: подробнее;
|
1 2 3 4 5 6 7 |
$('#mistify').mistify({ arrows: true, autoPlay: true, autoPlaySpeed: 5000, dots: true, readMoreText: 'Читать далее' }); |
Вот такой замечательный слайдер в результате получился. Попробуйте его, и думаю такой эффект перехода будет весьма интересен вашим посетителям.
Вот и все. Готово!
Интересно:
| Опубликовал admin 26.06.2018 в 09:34, в категории Плагины. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
Загрузка ...