Карусель в создании сайтов появилась достаточно давно. Она позволяет компактно перелистывать небольшие картинки, которые могут являться портфолиом компании или его партнерами. Рассмотрим простую jQuery карусель, которая поможет нам реализовать данную задумку.
Принцип работы карусели, которую я предлагаю, заключается в автоматическом (по таймеру) перелистывании картинок. Время перелистывания, да и саму автопрокрутку вы можете настроить и отключить самостоятельно. Также к каждому слайду можно подставлять ссылку и подпись к картинке.
Карусель имеет стрелки, с помощью которых можно вручную перелистовать слайды в обе стороны. Данная карусель не адаптирована под мобильники. Любую css верстку вы можете проделать самостоятельно, чтобы подогнать стили под дизайн вашего сайта.
Если вам необходимо будет отключить автопрокрутку в карусели, то удалите строку 20. Чтобы поменять время смены картинок – укажите в 17 строке нужное число в mc. Например, сейчас стоит 4000, что означает, каждые 4 сек.
Фактически в данную карусель можно установить сколько угодно слайдов, делается это вставкой li конструкции, которую вы найдете в архиве внутрь ul тега. Изначальный css карусели достаточно мал, поэтому я сразу загрузил его в index-й файл примера. Желаю успешной установки!
(Пока оценок нет)
Загрузка...