От автора: Отзывчивый слайдер-карусель, отображающий выбранные отзывы клиентов, созданный при помощи CSS и jQuery.
Сладер-карусель с отзывами является стратегически важным разделом сайта. Это маркетинговый инструмент, основная цель которого – сообщить пользователям, что «этот продукт/услуга уже был опробован. И он является хорошим. Верьте нам!». Сегодня мы поделимся с вами способом создания простого отзывчивого модуля для отзывов клиентов, который можно легко встроить в ваш дизайн. Кроме этого мы предусмотрели вариант, когда пользователям захочется посмотреть больше отзывов. Для этого мы добавили кнопку, при нажатии на которую, с классным CSS3 переходом, открывается модальное окно со всеми отзывами.
Для создания данного модуля нам потребовались 2 плагина: FlexSlider для слайдера-карусели, Masonry layout для построения сетки модального окна с отзывами.
Создание структуры
В качестве обертки для слайдера мы использовали элемент с классом .cd-testimonials-wrapper. Слайдер представляет собой ненумерованный список, а также мы добавили ссылку-якорь (.cd-see-all) в качестве кнопки для открытия модального окна со всеми отзывами.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="cd-testimonials-wrapper cd-container"> <ul class="cd-testimonials"> <li> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <div class="cd-author"> <img src="img/avatar-1.jpg" alt="Author image"> <ul class="cd-author-info"> <li>MyName</li> <li>CEO, AmberCreative</li> </ul> </div> </li> <li><!-- ... --></li> <li><!-- ... --></li> </ul> <!-- cd-testimonials --> <a href="#0" class="cd-see-all">See all</a> </div> <!-- cd-testimonials-wrapper --> |
Элемент с классом .cd-testimonials-all содержит в себе список (еще один ненумерованный список) со всеми отзывами.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class="cd-testimonials-all"> <div class="cd-testimonials-all-wrapper"> <ul> <li class="cd-testimonials-item"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit totam saepe iste maiores neque animi molestias nihil illum nisi temporibus.</p> <div class="cd-author"> <img src="img/avatar-1.jpg" alt="Author image"> <ul class="cd-author-info"> <li>MyName</li> <li>CEO, CompanyName</li> </ul> </div> <!-- cd-author --> </li> <li class="cd-testimonials-item"><!-- ... --></li> </ul> </div> <!-- cd-testimonials-all-wrapper --> <a href="#0" class="close-btn">Close</a> </div> <!-- cd-testimonials-all --> |
Добавление стилей
CSS здесь достаточно простой, ничего необычного. Только пара моментов заслуживает внимания: все иконки созданы только с помощью CSS. Две стрелки слайдера-карусели, например, состоят из 2 повернутых в нужном направлении псевдо-элементов (::before и ::after). Вот сам код (обратите внимание, что вы не увидите элемента div с классом .flex-direction-nav в HTML структуре, поскольку он создан плагином FlexSlider):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
.flex-direction-nav li { position: absolute; height: 100%; width: 40px; top: 0; } .flex-direction-nav li:first-child { left: 0; } .flex-direction-nav li:last-child { right: 0; } .flex-direction-nav li a { display: block; height: 100%; width: 100%; /* image replacement */ overflow: hidden; text-indent: 100%; white-space: nowrap; transition: background-color 0.2s; } .flex-direction-nav li a::before, .flex-direction-nav li a::after { /* левая и правая стрелки на чистом CSS */ content: ''; position: absolute; left: 50%; top: 50%; width: 2px; height: 13px; background-color: white; } .flex-direction-nav li a::before { transform: translateY(-35px) rotate(45deg); } .flex-direction-nav li a::after { transform: translateY(-27px) rotate(-45deg); } .flex-direction-nav li:last-child a::before { transform: translateY(-35px) rotate(-45deg); } .flex-direction-nav li:last-child a::after { transform: translateY(-27px) rotate(45deg); } |
Элемент с классом .cd-testimonials-all (контейнер, содержащий список с отзывами) по умолчанию скрыт благодаря свойству visibility. Когда это возможно (чаще всего с элементами, имеющими абсолютное или фиксированное позиционирование и не взаимодействующими с основным потоком остальных элементов на странице), я предпочитаю использовать именно свойство visibility, а не display. Также причиной является то, что для свойства visibility вы можете применить переход (transition), а для свойства display – нет. Для создания эффекта плавного появления вам также нужно просто добавить переход для свойства opacity. Сам трюк, однако, заключается в добавлении задержки перехода для свойства visibility (НО только когда класс .is-visible удален. Таким образом, вам нужно удалить задержку у класса .is-visible).
Чтобы было проще понять: когда вы добавляете класс .is-visible, свойство visibility не имеет задержки (используемый переход является единственным). Элемент должен мгновенно стать видимым, затем прозрачность можно плавно переключить с 0 на 1. Когда вы удаляете класс, к элементу div с классом .cd-testiminials-all применяется только используемый переход. В этом случае значение свойства visibility должно переключиться с visible на hidden ПОСЛЕ завершения перехода для свойства opacity. В противном случае элемент просто станет НЕвидимым, без эффекта исчезновения (у перехода для свойства opacity не будет времени на выполнение).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.cd-testimonials-all { position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-color: white; z-index: 2; visibility: hidden; opacity: 0; transition: opacity .3s 0s, visibility 0s .3s; } .cd-testimonials-all.is-visible { visibility: visible; opacity: 1; transition: opacity .3s 0s, visibility 0s 0s; } |
Обработка событий
Для внедрения слайдера-карусели мы использовали jQuery-плагин Flexslider от Woothemes:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$('.cd-testimonials-wrapper').flexslider({ //объявляем элементы слайдера selector: ".cd-testimonials > li", animation: "slide", //не добавляем навигацию для управления страничной организацией каждого слайда controlNav: false, slideshow: false, //разрешаем плавную анимацию для высоты слайдера в горизонтальном режиме smoothHeight: true, start: function(){ $('.cd-testimonials').children('li').css({ 'opacity': 1, 'position': 'relative' }); } }); |
Для модально страницы с отзывами мы использовали библиотеку Masonry:
|
1 2 3 |
$('.cd-testimonials-all-wrapper').children('ul').masonry({ itemSelector: '.cd-testimonials-item' }); |
Автор: Sebastiano Guerriero
Источник: //codyhouse.co/
Редакция: Команда webformyself.
Комментарии (4)