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

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

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

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

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

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

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

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

<div class="cd-testimonials-wrapper cd-container">
    <ul class="cd-testimonials">
        <li>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <div class="cd-author">
                <img src="img/avatar-1.jpg" alt="Author image">
                <ul class="cd-author-info">
                    <li>MyName</li>
                    <li>CEO, AmberCreative</li>
                </ul>
            </div>
        </li>
 
        <li><!-- ... --></li>
 
        <li><!-- ... --></li>
    </ul> <!-- cd-testimonials -->
 
    <a href="#0" class="cd-see-all">See all</a>
</div> <!-- cd-testimonials-wrapper -->

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

<div class="cd-testimonials-all">
    <div class="cd-testimonials-all-wrapper">
        <ul>
            <li class="cd-testimonials-item">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit totam saepe iste maiores neque animi molestias nihil illum nisi temporibus.</p>
                
                <div class="cd-author">
                    <img src="img/avatar-1.jpg" alt="Author image">
                    <ul class="cd-author-info">
                        <li>MyName</li>
                        <li>CEO, CompanyName</li>
                    </ul>
                </div> <!-- cd-author -->
            </li>
 
            <li class="cd-testimonials-item"><!-- ... --></li>
        </ul>
    </div>    <!-- cd-testimonials-all-wrapper -->
 
    <a href="#0" class="close-btn">Close</a>
</div> <!-- cd-testimonials-all -->

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

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.2s;
}
 
.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({
            'opacity': 1,
            'position': 'relative'
        });
    }
});

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

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

Автор: Sebastiano Guerriero

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

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

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

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

  1. Giga

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

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

  2. Никита

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree