Лого www.SiteHere.ru

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

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

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

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

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

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

Вы можете скачать только понравившийся пример

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

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

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

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

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

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

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

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

HTML КОД
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> подключаем скрипты:

HTML КОД
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 этап. Разметка для слайдера

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

HTML КОД
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:

JAVASCRIPT КОД
1
2
3
4
5
$('.owl-carousel').owlCarousel({
    items: 1,
    loop: true,
    dots: true
});

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

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

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

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

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

Отзывы для лендинга - пример 1

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

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

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 код данных классов:

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 функции. С их помощью можно создать дополнительные возможности для слайдера.

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

JAVASCRIPT КОД
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 готовых блоков отзывов, любой из которых можно отдельно скачать по кнопке справа от названия каждого из примеров.

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

Успехов!

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

Скрипт отзывов для лендинга — адаптивный блок «отзывы» для лендинга 4.81/5 (96.25%) 16 голос(ов)

Понравилась статья - расскажи друзьям! :)

21 комментарий к записи
  • Наталья Яшина

    Юрий, огромная благодарность! Давно искала подобное!

     
  • Валентин

    Здравствуйте! Спасибо больше за содержательную статью, но при попытке реализовать данный пример, я столкнулся с проблемой. В файле "owl.carousel.min.js" возникла проблема "Uncaught TypeError: Cannot read property 'clone' of undefined". Я к сожалению, не знаю как исправить этот неприятный момент.

    Вообще информация действительно полезная, но у меня не получилось воплотить её в жизнь(

     
    • Юрий Немец

      Здравствуйте, Валентин!

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

      Также вы можете прислать ссылку на страницу, где у вас ошибка.

       
  • Богдан

    Но она не адаптивная!!!

     
    • Юрий Немец

      Добрый день, Богдан!

      Адаптацию вы можете настроить самостоятельно, как это сделано в последнем примере — ссылка.

      Возможно я вас не так понял, какой момент при адаптации вас интересует?

       
  • Богдан

    Этот блок отзывов не адаптивен

     
    • Юрий Немец

      При каком разрешении, какой браузер используете, а также какая ОС?

       
  • Богдан

    Вот, смотрите: ширина экрана 320px — как на iPhone 5 — SE. Прикреплен скриншот из инспектора.
    https://drive.google.com/open?id=0BwnaBMtYSenIVWl2RUUwYzZ5V2s

     
    • Юрий Немец

      Богдан, спасибо за скриншот. Поправил примеры.

       
      • Богдан

        Спасибо за оперативность)

         
        • Юрий Немец

          Если у вас появятся вопросы, то вы всегда сможете задать свои вопросы в комментариях 🙂 .

           
  • Дмитрий

    Здраствуйте, проблема с пятым примером, у меня не видны стрелочки (на вашем примере тоже) в коде  для owl-prev и owl-next вот такое  element.style { display: none;} если убрать то стрелка появляется до обновления скрипта. Вопрос в каком файле прописан display: none? не могу найти

     
    • Юрий Немец

      Здравствуйте, Дмитрий!

      В файле CSS изменений вносить не нужно, все настраивается в JS при инициализации плагина.

      Поправил пятый пример со стрелками. Проверьте, пожалуйста!

       
      • Дмитрий

        Спасибо, теперь все работает

         
  • Григорий

    А как сделать, чтобы отзывы сами перелистывались?

     
    • Юрий Немец

      Вам необходимо добавить параметр autoplay со значением true, как это сделано в примере 5.2.

       
  • Ильяс

    Спасибо за множество примеров! Подскажите, пожалуйста, как управлять шириной блоков внутри отзыва, как настраивать выравнивание текста в этих блоках, цвет, шрифт и т.д

     
    • Юрий Немец

      Здравствуйте!

      Для этого используется CSS. Изучить CSS можете по ссылке — основы CSS.

       
      • Ильяс

        Спасибо за ответ! Я внимательно посмотрел структуру элементов внутри карусели, и похоже, что сам отзыв внутри блока <div class="item">. Но в правилах CSS я не нашел правил для класса .item А также не вижу аргументов, задающих ширину дочерних элементов блока .item 

        Подумал, может быть эти правила в js? 

         
        • Юрий Немец

          У элемента div с классом item есть много "родителей" (блоки, в которые он вложен). И он занимает 100% ширину этих блоков, если уменьшите ширину блока-родителя, то и div с классом item изменит свою ширину.

           
  • Дмитрий

    Большое спасибо!

     

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

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