Слайдер отзывов клиентов сайта на CSS и jQuery

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

 

ДЕМО

ИСХОДНИКИ

 

Чтобы реализовать функции данного модуля нам потребовались 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'
});

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

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

---