Простий адаптивний jquery слайдер

У своїх проектах велике значення приделяю мінімізації коду, для прискорення швидкості завантаження сайту. І простий jQuery слайдер – плагін ResponsiveSlides.js став справжньою знахідкою. Плагін має багато стандартних гнучких налаштувань і як говорилося – слайдер дуже легкий і простий у використанні. Не дивіться що потрібне підключення окремого js файл – файл містить мінімум коду, і при бажанні можна просто скопіювати вміст його в свій основний файл скрипта сайту. Зазначу що для налаштування “під себе” – потрібні мінімальні знання css.

Адаптивний jQuery слайдер ResponsiveSlides.js – приклади використання.

Для початку – офіційна сторінка автора – тут є основна інформація англійською та можливість завантажити:

>> Сторінка автора (+Демо) <<

Дале саме підключення. Воно як завжди стандартне:

або як йшлося вище – можна просто скопіювати вміст responsiveslides.min.js в основній js файл сайту.

Сама розмітка слайдера на сторінку:

Як видно – простіше нікуди, до того ж можна прописувати alt і title картинок а також додавати посилання і текст в конструкцію <li>…</li> – так що на виході отримаємо не просто адаптивний jQuery слайдер, а й повноцінні і вто же час простий jQuery SEO слайдер – вміст якого чудово індексується і приносить користь у просуванні (звертаю увагу – тут реалзована найпростіша структура слайдера, якщо ви додасте додаткові блоки вміст не забудьте прописати додаткові стилі для них).

CSS стилі простого jQuery слайдера:

Стилі підключати окремим файлом немає сенсу – так що просто копіюємо їх в свій css файл сайту:

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

Ну і власне сама функція ініціалізації слайдера:

і для WordPress окремо:

Простий jQuery слайдер – тонка настройка:

Основні налаштування jQuery слайдера, не дивлячись на його простоту – досить широкі, і Ви з легкістю зможете надати йому потрібний вигляд під свої нужнды. Налаштування прописуються в коді скрипта ініціалізації. Далі код з коментарями – які параметри використовувати, – вирішувати вам:

 

Як завжди – посилання на особисту заначку : Завантажити

Приклад роботи прямо на сторінку:


  • простий jQuery слайдер
  • адаптивний jQuery слайдер
  • jQuery слайдер завантажити

Простий адаптивний jQuery слайдер ResponsiveSlides.js – офіційна інформація з сайту:

ResponsiveSlides.js – це крихітний плагін jQuery, який створює чутливий слайдер, використовуючи елементи всередині контейнера. Він використовується на таких сайтах, як Microsoft Build 2012 і Gridset App. ResponsiveSLides.js працює з широким спектром браузерів, включаючи всі версії IE від IE6 і вище. Він також додає підтримку max-ширини CSS для IE6 та інших браузерів, які її не підтримують. Тільки залежність jQuery (підтримується 1.6 і вище) і що всі зображення мають однаковий розмір.

Найбільша різниця з іншими плагінами-слайдерами – це розмір файлу (1.4 kb minified і gzipped) +, який не намагається зробити. У відповідному режимі слайди мають в основному лише два різних режими: або він просто автоматично в’яне із зображеннями, або працює як гнучкий контейнер зображень з розбивкою по сторінкам та / або навігації, щоб зникати між слайдами.

  • Повністю адаптивний
  • 1kb, minified і gzipped
  • Переходи CSS3 з відступом JavaScript
  • Проста розмітка з використанням неупорядкованого списку
  • Установки для періодів переходу і таймауту
  • Підтримка декількох слайд-шоу
  • Автоматичне і ручне загасання
  • Працює у всіх основних настільних і мобільних браузерах
  • Підпису і інші елементи html, підтримувані всередині слайдів
  • Окреме розбиття на сторінки і наступний / попередній управління
  • Можливість вибору, де елементи керування додаються до
  • Можливість випадково порядок слайдів
  • Можливість використання спеціальної розмітки для розбивки на сторінки
  • Може бути припинені при наведенні слайд-шоу та / або управління
  • Зображення можуть бути обгорнуті всередині посилань
  • Необов’язкові зворотні виклики «до» і «після»

 

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *