Отзывы клиентов для сайта который предоставляет услуги или рекламирует себя является очень важным элементов в структуре сайта. Данный раздел не стоит упускать из виду и подать его посетителям красиво и отзывчиво. В данном уроке мы рассмотрим как реализовать данную функцию. Мы рассмотрим замечательный способ создания простого модуля для отзывов клиентов, который можно легко встроить в ваш дизайн. Кроме этого мы предусмотрели вариант, когда пользователям необходимо посмотреть больше отзывов.
Чтобы реализовать функции данного модуля нам потребовались 2 плагина: FlexSlider для слайдера-карусели, Masonry layout для построения сетки модального окна с отзывами.
Шаг 1. HTML
Весь слайдер поместим в элемент .cd-testimonials-wrapper.
Сам элемент будет представлен в виде ненумерованного списка.
<div class="cd-testimonials-wrapper cd-container">
<ul class="cd-testimonials">
<li>
<p>Отзыв</p>
<div class="cd-author">
<img src="img/avatar-1.jpg" alt="Author image">
<ul class="cd-author-info">
<li>Имя</li>
<li>CEO, AmberCreative</li>
</ul>
</div>
</li>
<li><!-- ... --></li>
<li><!-- ... --></li>
</ul>
<a href="#0" class="cd-see-all">See all</a>
</div>
Элемент с классом .cd-testimonials-all
содержит в себе список (еще один ненумерованный список) со всеми отзывами.
<div class="cd-testimonials-all">
<div class="cd-testimonials-all-wrapper">
<ul>
<li class="cd-testimonials-item">
<p>Отзыв</p>
<div class="cd-author">
<img src="img/avatar-1.jpg" alt="Author image">
<ul class="cd-author-info">
<li>Имя</li>
<li>CEO, CompanyName</li>
</ul>
</div>
</li>
<li class="cd-testimonials-item"><!-- ... --></li>
</ul>
</div>
<a href="#0" class="close-btn">Закрыть</a>
</div>
Разметка достаточно простая и не должна вызвать у вас затруднений, со всех отзывов мы построим единую схему, в которой будут отображены все отзывы клиентов.
Шаг 2. CSS
В CSS ничего необычного, разве что создание иконок. 2 стрелки для направления слайдов созданы с помощью псевдо элементов (::before и ::after)
. Вот сам код (обратите внимание, что вы не увидите элемента div с классом .flex-direction-nav
в HTML структуре, поскольку он создан плагином FlexSlider):
.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%;
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 {
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 {
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;
}
Чтобы было проще понять: когда вы добавляете класс .is-visible
, свойство visibility
не имеет задержки (используемый переход является единственным). Элемент должен мгновенно стать видимым, затем прозрачность можно плавно переключить с 0 на 1. Когда вы удаляете класс, к элементу div с классом .cd-testiminials-all
применяется только используемый переход. В этом случае значение свойства visibility
должно переключиться с visible
на hidden
после завершения перехода для свойства opacity
. В противном случае элемент просто станет невидимым, без эффекта исчезновения (у перехода для свойства opacity не будет времени на выполнение).
Шаг 3. jQuery
Для создания слайдера-карусели мы использовали jQuery-плагин Flexslider
от Woothemes
:
$('.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
:
$('.cd-testimonials-all-wrapper').children('ul').masonry({
itemSelector: '.cd-testimonials-item'
});
В результате, у нас получился замечательный дизайн отзывы клиентов, который приятно удивит посетителей, кроме этого, чтобы просмотреть все отзывы не нужно переходить на другую страницу, а все доступно в модальном окне.