Слайдер-карусель для відгуків клієнтів

15

Від автора: Чуйний слайдер-карусель, що відображає вибрані відгуки клієнтів, створений за допомогою CSS і jQuery.

Сладер-карусель з відгуками є стратегічно важливим розділом сайту. Це маркетинговий інструмент, основна мета якого – повідомити користувачам, що «цей продукт/послуга вже був випробуваний. І він є добрим. Вірте нам!». Сьогодні ми поділимося з вами способом створення простого чуйного модуля для відгуків клієнтів, який можна легко вписується в ваш дизайн. Крім цього ми передбачили варіант, коли користувачам захочеться подивитися більше відгуків. Для цього ми додали кнопку, при натисканні на яку, з класним CSS3 переходом, відкривається модальне вікно з усіма відгуками.

Слайдер-карусель для відгуків клієнтівСлайдер-карусель для відгуків клієнтів

Для створення даного модуля нам потрібні 2 плагіна: FlexSlider для слайдера-каруселі, Masonry layout для побудови сітки модального вікна з відгуками.

Створення структури

Як обгортки для слайдера ми використовували елемент з класом .cd-testimonials-wrapper. Слайдер являє собою ненумерований список, а також ми додали посилання-якір (.cd-see-all) в якості кнопки для відкриття модального вікна з усіма відгуками.

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Слайдер-карусель для відгуків клієнтів

    • MyName
    • CEO, AmberCreative

See all

Елемент з класом .cd-testimonials-all містить у собі список (ще один ненумерований список з усіма відгуками.

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit totam saepe iste maiores neque animi molestias nihil illum nisi temporibus.

    Слайдер-карусель для відгуків клієнтів

    • MyName
    • CEO, CompanyName

Close

Додавання стилів

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%;
/* image replacement */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
transition: background-color 0.2 s;
}
.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 не буде часу на виконання).

.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:

$(‘.cd-testimonials-wrapper’).flexslider({
//оголошуємо елементи слайдера
selector: «.cd-testimonials > li»,
animation: «slide»,
//не додаємо навігацію для управління сторінкової організацією кожного слайда
controlNav: false,
slideshow: false,
//дозволяємо плавну анімацію для висоти слайдера в горизонтальному режимі
smoothHeight: true,
start: function(){
$(‘.cd-testimonials’).children(‘li’).css({
‘непрозорість’: 1,
‘position’: ‘relative’
});
}
});

Для модально сторінки з відгуками ми використовували бібліотеку Masonry:

$(‘.cd-testimonials-all-wrapper’).children(‘ul’).masonry({
itemSelector: ‘.cd-testimonials-item’
});