Простой адаптивный слайдер 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.4kb minified и gzipped) +, который этот не пытается сделать. В ответном режиме слайды имеют в основном только два разных режима: либо он просто автоматически увядает с изображениями, либо работает как гибкий контейнер изображений с разбивкой по страницам и / или навигации, чтобы исчезать между слайдами.

  • Полностью отзывчивый
  • 1kb, minified и gzipped
  • Переходы CSS3 с отступлением JavaScript
  • Простая разметка с использованием неупорядоченного списка
  • Настройки для периодов перехода и таймаута
  • Поддержка нескольких слайд-шоу
  • Автоматическое и ручное затухание
  • Работает во всех основных настольных и мобильных браузерах
  • Подписи и другие html-элементы, поддерживаемые внутри слайдов
  • Отдельное разбиение на страницы и следующее / предыдущее управление
  • Возможность выбора, где элементы управления добавляются к
  • Возможность рандомизировать порядок слайдов
  • Возможность использования специальной разметки для разбивки на страницы
  • Могут быть приостановлены при наведении слайд-шоу и / или управления
  • Изображения могут быть обернуты внутри ссылок
  • Необязательные обратные вызовы «до» и «после»

 

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

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