Слайдер отзывов клиентов сайта на CSS и jQuery

Слайдер отзывов клиентов сайта на CSS и jQuery


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

 

ДЕМО
ИСХОДНИКИ

 

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

 

Шаг 1.  HTML

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

<div class="cd-testimonials-wrapper cd-container">
<ul class="cd-testimonials">
<li>
<p>Отзыв</p>
<div class="cd-author">
<img src="img/avatar-1.jpg" alt="Author image">
<ul class="cd-author-info">
<li>Имя</li>
<li>CEO, AmberCreative</li>
</ul>
</div>
</li>
<li><!-- ... --></li>
<li><!-- ... --></li>
</ul>
<a href="#0" class="cd-see-all">See all</a>
</div>

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

<div class="cd-testimonials-all">
<div class="cd-testimonials-all-wrapper">
<ul>
<li class="cd-testimonials-item">
<p>Отзыв</p>

<div class="cd-author">
<img src="img/avatar-1.jpg" alt="Author image">
<ul class="cd-author-info">
<li>Имя</li>
<li>CEO, CompanyName</li>
</ul>
</div>
</li>

<li class="cd-testimonials-item"><!-- ... --></li>
</ul>
</div>

<a href="#0" class="close-btn">Закрыть</a>
</div>

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

 

Шаг 2.  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%;
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 {
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 {
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;
}

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

 

Шаг 3. jQuery

Для создания слайдера-карусели мы использовали 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'
});

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

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


Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

Слайдер отзывов клиентов сайта на CSS и jQuery

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


Слайдер отзывов клиентов сайта на CSS и jQuery

Сегодня ресурс представляет собой полноразмерное изображение заголовка, анимированное с использованием свойства масштаба CSS3 и jQuery для имитации эффекта 3D-уменьшения и отображения основного содержимого страницы.


Слайдер отзывов клиентов сайта на CSS и jQuery

Модальные окна стали весьма популярны, и никого уже этим не удивить, но все же не стоит забывать о таком полезном инструменте веб-мастера, в данном уроке мы рассмотрим пример нескольких различных модальных окон с помощью плагина mootools. Такие окна весьма функциональны Внешний вид и функционирование окна может быть настроено с помощью различных опций, устанавливающих прозрачность, ширину, цвет покровного слоя, возможность перетаскивания окна и другие параметры. Плагин мало весит и может выводить в модальном окне любое содержание..


Слайдер отзывов клиентов сайта на CSS и jQuery

Это интро-страница, ориентированная на фоновое изображение полной ширины и жирное анимированное меню. И для браузеров, которые его поддерживают, хороший внешний вид, похожий на iOS, за навигацию.


Раскрутка в соцсетях

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


Перейти в Блог