Скрипт отзывов для лендинга — адаптивный блок «отзывы» для лендинга

Этой статьей я хочу не только донести до вас новую фишку или плагин, который позволяет что-то интересное сделать, а дать именно готовые решения. Здесь находится 18 готовых блоков с отзывами для лендинга, которые можно сразу вставить на сайт. То есть не нужно перебирать множество библиотек, а достаточно найти подходящий блок отзывов из примеров и расположить его на своем сайте.

Перед тем как приступать к самому интересному, рекомендую посмотреть прошлые статьи на эту тему:

• Креативный слайдер для сайта jQuery — необычные слайдеры для сайта
• 10 примеров продающих лендингов + инструкция по созданию
• 7 конструкторов квиз сайтов

18 готовых примеров с блоками отзывов для лендинга можно посмотреть по ссылке:

Посмотреть примеры

Удобство использования

Каждый пример вы можете скачать отдельно. Я не стал их все объединять в одну большую страницу, а сделал много архивов, которые вы можете скачать. То есть в каждом отдельном архиве собраны структура, стили и функционал, касающиеся только одного конкретного примера.

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

[ВИДЕО] Как использовать блок с отзывами на лендинге?

Я сделал небольшое видео о том, как использовать готовые материалы. Если после просмотра видео что-то останется неясным, прочтите текстовую инструкцию ниже видео.

Ссылки на необходимые ресурсы:

• Библиотека jQuery v2.1.3 — СКАЧАТЬ
• Плагин Owl Carousel 2 — СКАЧАТЬ | Оф. сайт
• Библиотека Animate.css — СКАЧАТЬ | Оф. сайт
• Иконочный шрифт Font Awesome (для 5-го примера) — СКАЧАТЬ | Оф. сайт

1 этап. Подключаем необходимые стили и скрипты

Для начала скачиваем все необходимые плагины по ссылкам выше. Далее их желательно разместить все в одной папке. Например, в папке "libs" вашего проекта.

В шапке перед закрывающим тегом </head> подключаем стили:

1
2
3
4

<link rel="stylesheet" href="libs/animate/animate.css">
<link rel="stylesheet" href="libs/owl-carousel/owl.carousel.min.css">
<link rel="stylesheet" href="libs/owl-carousel/owl.theme.default.min.css">
<link rel="stylesheet" href="libs/font-awesome-4.6.3/css/font-awesome.min.css">

Затем перед закрывающим тегом </body> подключаем скрипты:

1
2
3

<script src="libs/jquery/jquery-2.1.3.min.js"></script>
<script src="libs/owl-carousel/owl.carousel.min.js"></script>
<script src="js/custom.js"></script>

Хочу обратить ваше внимание на последний скрипт — custom.js. Это файл, где мы будем задавать настройки для слайдера с отзывами.

2 этап. Разметка для слайдера

Сейчас создаем структуру, где будут находится отзывы:

1
2
3
4
5
6
7
8
9
10
11

<div class="owl-carousel">
    <div class="item">
        <!-- Здесь можно размещать HTML отзыва -->
    </div>
    <div class="item">
        <!-- Здесь можно размещать HTML отзыва -->
    </div>
    <div class="item">
        <!-- Здесь можно размещать HTML отзыва -->
    </div>
</div>

И остался последний шаг.

3 этап. Настройки для скрипта и инициализация (JS)

Приведу базовый пример, от которого можно в дальнейшем отталкиваться. Данный код необходимо разместить в файле custom.js:

1
2
3
4
5

$('.owl-carousel').owlCarousel({
    items: 1,
    loop: true,
    dots: true
});

Если создадите слайдер с такими значениями, у вас уже получится самый простой вариант слайдера. Элементы можно просматривать в цикле (по кругу), а также с точками внизу, в качестве навигации. А сейчас более подробно об этих свойствах:

• items — количество элементов, которые будут отображаться одновременно. В примерах, которые вы видели выше, это значение равно единице. Но вы можете поставить любую другую цифру, которая вам нужна. Если не задавать этот параметр, то по умолчанию он равен 3.
• loop — зацикливаем наш слайдер. То есть, при перетаскивании влево он будет делать это бесконечно. На самом деле мы имеем дело с иллюзией, а создается она с помощью дублирования первого и последнего элемента.
• dots — здесь включаем навигацию с помощью точек под слайдером. Но этот параметр можно и не писать, потому что он по умолчанию стоит в значении true. А вот если вам необходимо отключить точки, тогда необходимо поставить значение для этого свойства false.

Мы рассмотрели лишь 3 свойства. На самом деле их там около 50. Полный список можно найти здесь.

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

Разбор демо #1. Обычная прокрутка + анимация фото

Начнем с этого примера и посмотрим, что я дописал, кроме стандартных свойств. Здесь используется библиотека animate.css. Ссылку на скачивание данной библиотеки я разместил в начале статьи. Рекомендую вначале подключить все необходимые библиотеки, а затем уже тестировать с помощью свойств, которые вы увидите в данной статье.

Прежде всего, посмотрим именно на HTML код этого примера:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<div class="owl-carousel block-items">
    <div class="item">
        <div class="inner-testimonial">
            <img src="img/client1.png" class="animated bounceIn full-opacity" alt="Клиент 1">
            <h3 class="city-name">Иван, Москва</h3>
            <p class="text-testimonial">Текст отзыва.</p>
        </div>
    </div>
    <div class="item">
        <div class="inner-testimonial">
            <img src="img/client2.png" alt="Клиент 2">
            <h3 class="city-name">Светлана, Екатеринбург</h3>
            <p class="text-testimonial">Текст отзыва.</p>
        </div>
    </div>
    <div class="item">
        <div class="inner-testimonial">
            <img src="img/client3.png" alt="Клиент 3">
            <h3 class="city-name">Александр, Ярославль</h3>
            <p class="text-testimonial">Текст отзыва.</p>
        </div>
    </div>
</div>

Хочу обратить ваше внимание на дополнительные классы, которые дописывал, чтобы получилась анимация. Блоки, необходимые для самой библиотеки и ее классы я описывать не буду, остановлюсь только на тех, которые были дописаны мною. Буду писать в формате "Строка #. Класс", чтобы вам было легче его найти. А чуть ниже приведу CSS данных классов:

• Строка 1. Класс "block-items" — чтобы было легче работать с большим блоком слайдера, я дописал свой класс. Поэтому сейчас не составит труда сделать отступы и выровнять слайдер так, как мы этого захотим.
• Строки 3, 11 и 18. Класс "inner-testimonial" — данный класс также необходим для более комфортного управления отдельным блоком с отзывом.
• Строка 4. Классы "animated bounceIn full-opacity" — у первого изображения в отзыве мы присваиваем вот эти классы. В каждом из примеров классы отличаются, потому что анимация разная. Но есть 2 класса, которые используются постоянно — это класс "animated", используемый библиотекой animate.css, чтобы указать, что у данного элемента будет анимация и класс "full-opacity", который необходим именно для регулярного появления изображений при скролле слайдера.

Это самые основные классы, остальные нужны лишь для стилизации элементов внутри каждого пункта слайдера.

А вот CSS код данных классов:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

.block-items {
    cursor: default;
}
 
.inner-testimonial {
    text-align: center;
    background-color: #fff;
}
 
.inner-testimonial > img{
    max-width: 128px;
    margin:0 auto 15px;
    opacity: 0;
    -webkit-transition:all 1.3s linear;
    transition:all 1.3s linear;
}
 
/*Данные классы используются только в активном 
пункте слайдера, который сейчас виден*/
.owl-item.active .inner-testimonial > img{
    -webkit-transition:all 1.3s linear;
    transition:all 1.3s linear;
}
 
.owl-item.active .inner-testimonial > img.full-opacity {
    opacity:1;
    -webkit-transition:all 0.3s linear;
    transition:all 0.3s linear;
}

А сейчас самое интересное — это JS код этого примера, потому что здесь кроме параметров используются еще и callback функции. С их помощью можно создать дополнительные возможности для слайдера.

Сначала посмотрим на сам код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$(".owl-carousel").owlCarousel({
    loop:true,
    items: 1,
    margin:130,
    stagePadding:30,
    onTranslated: animateImgFunc,
    onChanged: animateImgClear
});
 
//Добавляем класс с анимацией изображения
function animateImgFunc() {
    $(".owl-carousel .active .inner-testimonial img").addClass("animated bounceIn full-opacity");
}
 
//Удаляем класс с анимацией изображения
function animateImgClear() {
    $(".owl-carousel .active .inner-testimonial img").removeClass("animated bounceIn full-opacity");
}

Некоторые параметры вы уже знаете, но необходимо также объяснить, почему здесь находятся остальные, и какую функцию выполняют. Давайте начнем рассматривать параметры:

• loop — данное свойства вам уже знакомо, мы просто делаем так, чтобы при перелистывании элементов слайдера влево, после последнего элемента все начиналось заново, но для этого не надо было переходить на первый слайд;
• items — это свойство вы также уже знаете, задаем количество слайдов (пунктов) слайдера, которые будут показывать одновременно;
• margin — это отступ справа у элемента слайдера. Если его не будет, то элементы могут быть видны не в своем пункте. С этим параметром можно экспериментировать;
• stagePadding — данное свойство задает внутренние отступы слева и справа. При некоторых эффектах (например, flipInX) необходимо чтобы данный параметр был побольше, иначе анимация блока обрезается. Его также можно задать на свое усмотрение;
• onTranslated — это не просто свойство, а функция, которая вызывается при полном появлении пункта (слайда) в активной области. В функции animateImgFunc, которая выполняется сразу после появления слайда, к изображению добавляются классы с анимацией. Как понимаете, у каждого из примеров эти классы отличаются. Но смысл остается такой же;
• onChanged — еще одна функция, которая вызывается при смене слайда (пункта). Когда сменяется слайд, то выполняется функция animateImgClear, которая удаляет у изображений все классы с анимацией. Это нужно для того, чтобы при переходе на любой слайд, данная анимация выполнялась регулярно.

По такому же принципу были реализованы: Демо 1, Демо 3 и Демо 4.

Перед тем, как применять на реальном проекте, попрактикуйтесь на чистой HTML странице и поэкспериментируйте со свойствами. Когда поймете принцип работы, тогда внедряйте в свои проекты и проекты заказчика.

Вывод

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

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

Успехов!

С Уважением, Юрий Немец