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

Как вы наверно догадались, начнем мы создание с подключением необходимых скриптов и CSS-стилей галереи, для этого между тегами <head> вставим следующий код:

Далее, Вам следует подключить следующий скрипт,  в нем вы можете поменять параметры delay (он указывает на время задержки между показом двух слайдов), animationTime (он указывает непосредственно на процесс смены слайдов (анимацию)), а также можете заменить названия кнопок «Старт» и «Стоп» на свои слова, например «Начать» и «Закончить».

В том месте, в котором вы хотите видеть галерею, следует вставить два блока, указав им следующие стили:

Далее нам нужно, чтобы блоки нумеровались, происходит это при помощи следующего скрипта:

Далее в каждый элемент <li></li> вы можете вставить любое содержимое:

Вот и все, если вам не нравится стиль оформления, то его легко можно изменить в файле page.css

На главную