Адаптивний слайдер для сайту

Микола Нігматулін, здрастуйте, якщо у вас виникли питання можуть бути встановлені у в паблік вк або написати на пошту підтримки ([email protected]).

Клікджекінг як соцфішінг, пишемо скрипт для отримання id користувача вконтакте

Адаптивний слайдер для сайту

Антон Кулешов, де то з вами можна поспілкуватися?

Клікджекінг як соцфішінг, пишемо скрипт для отримання id користувача вконтакте

Адаптивний слайдер для сайту

lam3r, я радий, що ви розібралися.

Клікджекінг як соцфішінг, пишемо скрипт для отримання id користувача вконтакте

Адаптивний слайдер для сайту

вибачте не розібрався, всі питання відпали

Клікджекінг як соцфішінг, пишемо скрипт для отримання id користувача вконтакте

Адаптивний слайдер для сайту

а як же помилка Content Security Policy directive

Клікджекінг як соцфішінг, пишемо скрипт для отримання id користувача вконтакте

Адаптивний слайдер для сайту

Сьогодні ми розглянемо адаптивний слайдер на jQuery - FlexSlider. На самому початку хочеться відзначити кілька пунктів, якими можна його описати при першому знайомстві.

  1. Два режиму відтворення зображення: slide (гортання) і fade (плавна зміна за рахунок CSS властивості opacity);
  2. Легкість установки і налаштування плагіна;
  3. Підтримка здійснюється у всіх сучасних браузерах;
  4. Великий набір налаштувань, які дозволяють досягти потрібного ефекту.

Перед тим як почати розглядати FlexSlider, я хочу згадати про раніше описане мною рішення, яке може бути вам корисно. Якщо ви шукайте адаптивний слайдер, який змінює картинки тільки в режимі fade, то пропоную скористатися плагіном responsiveSlides (Чуйні слайди). У нього безліч корисних функцій, і він в сім разів менше важить. Тепер повертаємося до теми даної статті.

Додавання FlexSlider відбувається в три етапи.

1. Підключаємо jQuery бібліотеку і файли плагіна:

2. Розміщуємо до себе на сторінку HTML розмітку (атрибут id вказано для відділення цього прикладу від інших):

3. Викликаємо плагін:

Після всіх цих дій у вас на сторінці з'явиться слайдер з настройками за замовчуванням і залишиться тільки додати свої CSS правила.

Це був перший приклад використання плагіна. Якщо потрібно додати слайдер з керуючими слайдами, то це так само легко зробити. Нам необхідно змінити трохи розмітку і до всіх елементів li дописати атрибут data-thumb. У його значенні вказується шлях до мініатюри.

В налаштуваннях плагіна додаємо новий параметр controlNav зі значення thumbnails.

jQuery код буде виглядати таким образам:

Це всього три варіанти як можна використовувати даний скрипт, роботу прикладів ви можете побачити в розділі «демо» до цієї статті. Залишилося тільки згадати про налаштування плагіна, все їх можна вивчити в розділі сайту woothemes - Step 4.

Сподіваюся, FlexSlider стане одним з хороших інструментів у вашій роботі.

Схожі статті

Copyright © 2024