%d1%81%d0%bb%d0%b0%d0%b9%d0%b4%d0%b5%d1%80-%d0%be%d1%82%d0%b7%d1%8b%d0%b2%d0%be%d0%b2-%d0%ba%d0%bb%d0%b8%d0%b5%d0%bd%d1%82%d0%be%d0%b2-%d1%81%d0%b0%d0%b9%d1%82%d0%b0-%d0%bd%d0%b0-css-%d0%b8-jqueryОтзывы клиентов для сайта который предоставляет услуги или рекламирует себя является очень важным элементов в структуре сайта. Данный раздел не стоит упускать из виду и подать его посетителям красиво и отзывчиво. В данном уроке мы рассмотрим как реализовать данную функцию. Мы рассмотрим замечательный способ создания простого модуля для отзывов клиентов, который можно легко встроить в ваш дизайн. Кроме этого мы предусмотрели вариант, когда пользователям необходимо посмотреть больше отзывов.

 

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

Шаг 1. HTML

Весь слайдер поместим в элемент .cd-testimonials-wrapper. Сам элемент будет представлен в виде ненумерованного списка.

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

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

%d1%81%d0%bb%d0%b0%d0%b9%d0%b4%d0%b5%d1%80-%d0%be%d1%82%d0%b7%d1%8b%d0%b2%d0%be%d0%b2-%d0%ba%d0%bb%d0%b8%d0%b5%d0%bd%d1%82%d0%be%d0%b2-%d1%81%d0%b0%d0%b9%d1%82%d0%b0-%d0%bd%d0%b0-css-%d0%b8-jquery

Шаг 2. CSS

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

Чтобы было проще понять: когда вы добавляете класс .is-visible, свойство visibility не имеет задержки (используемый переход является единственным). Элемент должен мгновенно стать видимым, затем прозрачность можно плавно переключить с 0 на 1. Когда вы удаляете класс, к элементу div с классом .cd-testiminials-all применяется только используемый переход. В этом случае значение свойства visibility должно переключиться с visible на hidden после завершения перехода для свойства opacity. В противном случае элемент просто станет невидимым, без эффекта исчезновения (у перехода для свойства opacity не будет времени на выполнение).

Шаг 3. jQuery

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

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

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

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

Читайте также: