Бесконечный ротатор содержания на jQueryВ целях нехватки ресурсов сайта и экономии места для визуальной разгрузки сайта в сегодняшнем уроке мы рассмотрим как создать бесконечный ротатор содержания с помощью одно из плагинов jQuery. Идея заключается в организации панелей, которые можно вращать бесконечно влево или вправо (по кругу). При нажатии на ссылку «Больше…» соответствующая панель сдвигается к левой стороне окна просмотра и выдвигается область содержания. Теперь можно перемещаться по карусели, которая содержит раскрытые пункты.

Нажатие на крестик закрывает область содержания и возвращает карусель к первоначальному виду. Для начала мы подключит необходимые фреймворки, которые надо разместить между тегами head, следует заметить, что некоторые скрипты мы подключим репозитория Google, этот делаем с целью ускорить загрузку.

Структура ротатора состоит из основного контейнера и контейнера пунктов. Каждый пункт содержит два раздела — панель и область содержания.

В первоначальном виде, ротатор имеет такой вид:

Бесконечный ротатор содержания на jQueryПосле нажатия на ссылку «Больше…», открывается область содержания:

Бесконечный ротатор содержания на jQuery

Следует заметить, что для работы данного ротатора используется плагин jQuery — Circular content carousel, вызываем его с помощью:

Вот некоторые опции которые используются по умолчанию:

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.