Автор

03 12.2016
Слайдер отзывов клиентов сайта на 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

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


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

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

Сделаем CSS3 анимацию, которую можно будет использовать в качестве прелоадера, статуса загрузки чего-либо. Работает в Firefox, Chrome и Safari.


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

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


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

Буквально перед новым годом задался целью автоматизировать свой сайт, а именно сделать так чтобы с 15 декабря до 15 января работал один стиль CSS, а в остальное время другой!


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close