Слайдер-карусель для отзывов клиентов

Слайдер-карусель для отзывов клиентов

От автора: Отзывчивый слайдер-карусель, отображающий выбранные отзывы клиентов, созданный при помощи CSS и jQuery.

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

скачать исходникидемо

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

Создание структуры

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Элемент с классом .cd-testimonials-all содержит в себе список (еще один ненумерованный список) со всеми отзывами.

Добавление стилей

CSS здесь достаточно простой, ничего необычного. Только пара моментов заслуживает внимания: все иконки созданы только с помощью CSS. Две стрелки слайдера-карусели, например, состоят из 2 повернутых в нужном направлении псевдо-элементов (::before и ::after). Вот сам код (обратите внимание, что вы не увидите элемента div с классом .flex-direction-nav в HTML структуре, поскольку он создан плагином FlexSlider):

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Элемент с классом .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 не будет времени на выполнение).

Обработка событий

Для внедрения слайдера-карусели мы использовали jQuery-плагин Flexslider от Woothemes:

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

Автор: Sebastiano Guerriero

Источник: //codyhouse.co/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Верстка. Быстрый старт

Практический курс по верстке адаптивного сайта с нуля!

Смотреть

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии (4)