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

Цією статтею я хочу не тільки донести до вас нову фішку або плагін, який дозволяє щось цікаве зробити, а дати саме готові рішення. Тут знаходиться 18 готових блоків з відгуками для Лендінзі, які можна відразу вставити на сайт. Тобто не потрібно перебирати безліч бібліотек, а досить знайти потрібний блок відгуків з прикладів і розташувати його на своєму сайті.

Перед тим як приступати до найцікавішого, рекомендую подивитися минулі статті на цю тему:

• Креативний слайдер для сайту jQuery - незвичайні слайдери для сайту
• Галерея для сайту з ефектом розмиття
• Слайд-шоу на фоновому зображенні

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

Подивитися приклади

Зручність використання

Кожен приклад ви можете завантажити окремо. Я не став їх все об`єднувати в одну велику сторінку, а зробив багато архівів, які ви можете завантажити. Тобто в кожному окремому архіві зібрані структура, стилі і функціонал, що стосуються тільки одного конкретного прикладу.

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

[ВІДЕО] Спосіб застосування та блок з відгуками на Лендінзі?

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

Посилання на необхідні ресурси:

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

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

Для початку завантажуємо всі необхідні плагіни по посиланнях вище. Далі їх бажано розмістити все в одній теці. Наприклад, в папці "libs"Вашого проекту.

У шапці перед закриває тегом підключаємо стилі:

1234

lt;link rel="Stylesheet" href="Libs / animate / animate.css"gt;lt;link rel="Stylesheet" href="Libs / owl-carousel / owl.carousel.min.css"gt;lt;link rel="Stylesheet" href="Libs / owl-carousel / owl.theme.default.min.css"gt;lt;link rel="Stylesheet" href="Libs / font-awesome-4.6.3 / css / font-awesome.min.css"gt;

Потім перед закриває тегом підключаємо скрипти:

123

lt;script src="Libs / jquery / jquery-2.1.3.min.js"gt; lt;/scriptgt;lt;script src="Libs / owl-carousel / owl.carousel.min.js"gt; lt;/scriptgt;lt;script src="Js / custom.js"gt; lt;/scriptgt;

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

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

Зараз створюємо структуру, де будуть знаходиться відгуки:

1234567891011

lt;div class="Owl-carousel"gt;lt;div class="Item"gt;lt;/divgt;lt;div class="Item"gt;lt;/divgt;lt;div class="Item"gt;lt;/divgt;lt;/divgt;

І залишився останній крок.

3 етап. Налаштування для скрипта і ініціалізація (JS)

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

12345

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

Якщо створите слайдер з такими значеннями, у вас вже вийде найпростіший варіант слайдера. Елементи можна переглядати в циклі (по колу), а також з точками внизу, як навігації. А зараз більш детально про ці властивості:

• items - кількість елементів, які будуть відображатися одночасно. У прикладах, які ви бачили вище, це значення дорівнює одиниці. Але ви можете поставити будь-яку іншу цифру, яка вам потрібна. Якщо не ставити цей параметр, то за замовчуванням він дорівнює 3.
• loop - зациклюватися наш слайдер. Тобто, при перетягуванні вліво він буде робити це нескінченно. Насправді ми маємо справу з ілюзією, а створюється вона за допомогою дублювання першого і останнього елемента.
• dots - тут включаємо навігацію за допомогою точок під слайдером. Але цей параметр можна і не писати, тому що він за замовчуванням стоїть в значенні true. А ось якщо вам необхідно відключити точки, тоді необхідно поставити значення для цієї властивості false.

Ми розглянули лише 3 властивості. Насправді їх там близько 50. Повний список можна знайти тут.

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

Розбір демо # 1. Звичайна прокрутка + анімація фото

Почнемо з цього прикладу і подивимося, що я дописав, крім стандартних властивостей. Тут використовується бібліотека animate.css. Посилання на скачування даної бібліотеки я розмістив на початку статті. Рекомендую спочатку підключити всі необхідні бібліотеки, а потім вже тестувати за допомогою властивостей, які ви побачите в цій статті.

Перш за все, подивимося саме на HTML код цього прикладу:

1234567891011121314151617181920212223

lt;div class="Owl-carousel block-items"gt;lt;div class="Item"gt;lt;div class="Inner-testimonial"gt;lt;img src="Img / client1.jpg" class="Animated bounceIn full-opacity" alt="Клієнт 1"gt;lt;h3 class="City-name"gt; Іван, Москваlt;/h3gt;lt;p class="Text-testimonial"gt; Текст відкликання.lt;/pgt;lt;/divgt;lt;/divgt;lt;div class="Item"gt;lt;div class="Inner-testimonial"gt;lt;img src="Img / client2.jpg" alt="Клієнт 2"gt;lt;h3 class="City-name"gt; Світлана, Єкатеринбургlt;/h3gt;lt;p class="Text-testimonial"gt; Текст відгуку.lt;/pgt;lt;/divgt;lt;/divgt;lt;div class="Item"gt;lt;div class="Inner-testimonial"gt;lt;img src="Img / client3.jpg" alt="Клієнт 3"gt;lt;h3 class="City-name"gt; Олександр, Ярославльlt;/h3gt;lt;p class="Text-testimonial"gt; Текст відгуку.lt;/pgt;lt;/divgt;lt;/divgt;lt;/divgt;

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

• Рядок 1. Клас "block-items" - щоб було легше працювати з великим блоком слайдера, я дописав свій клас. Тому зараз не важко зробити відступи і вирівняти слайдер так, як ми цього захочемо.
• Рядки 3, 11 і 18. Клас "inner-testimonial" - даний клас також необхідний для більш комфортного управління окремим блоком з відкликанням.
• Рядок 4. Класи "animated bounceIn full-opacity" - у першого зображення в відкликання ми присвоюємо ось ці класи. У кожному з прикладів класи відрізняються, тому що анімація різна. Але є 2 класу, які використовуються постійно - це клас "Animated", використовуваний бібліотекою animate.css, щоб вказати, що у даного елемента буде анімація і клас "Full-opacity", який необхідний саме для регулярного появи зображень при Скролл слайдера.

Це найосновніші класи, інші потрібні лише для стилізації елементів всередині кожного пункту слайдера.

А ось CSS код даних класів:

1234567891011121314151617181920212223242526272829

.block-items {cursor: default-}.inner-testimonial {text-align: center-background-color: #fff-}.inner-testimonial gt; 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 gt; img{-webkit-transition:all 1.3s linear-transition:all 1.3s linear-}.owl-item.active .inner-testimonial gt; img.full-opacity {opacity:1--webkit-transition:all 0.3s linear-transition:all 0.3s linear-}

Нині ж найцікавіше - це JS код цього прикладу, тому що тут крім параметрів використовуються ще й callback функцій. З їх допомогою можна зробити додаткові можливості для слайдера.

Спочатку подивимося на сам код:

123456789101112131415161718

$(".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 готових блоків відгуків, кожний з яких можна окремо завантажити по кнопці праворуч від назви кожного з прикладів.

Якщо вам їх не вистачить або ви захочете якийсь із них змінити, то завжди зможете це зробити, подивившись відео бо там я більш детально розповідаю про створення слайдера з нуля.

Успіхів!