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

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

От автора: Отзывчивый слайдер-карусель, отображающий выбранные отзывы клиентов, созданный при помощи 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

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

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

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

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

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

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки: ,

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

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

Комментарии Facebook:

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

  1. Giga

    Здраствуйте помогите мне пожалуйста разобраться с плагином wp-shop.

    Подскажите пожалуйста как сделать постраничную навигацию в витрине , чтобы страницы группировались (первая страница 1.2.3 …10 последняя страница ) , у меня страницы выводятся подряд (1.2.3.4.5.6.7) , или же где именно прописать на wp-shope . или если есть видео на эту тему большая просьба дать ссылку . Спасибо

  2. Никита

    Добрый день. Хороший слайдер получился, но есть проблема с работой на iphone. Из за него страница не скролится. Я покопал стили, и нашел z-index:1 у «всех отзывов» который не дает скролить. Если его убрать, то скрол работает, но при нажатии на кнопку «смотреть все» перестает работать скрол внутри)) в общем верстал в итоге свой слайдер)

  3. Дарья

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree