Предыдущий ролик Следующий ролик  

Видео урок: Создание карусели изображений

Bootstrap 3: добавь интерактивность на свой сайт

Теперь, когда мы приукрасили страницу, изменив цвет панели на фиолетовый, она стала выглядеть немного лучше, и мы можем уже заняться самой каруселью. На самом базовом уровне я могу создать ее всего за один урок, что я и собираюсь сейчас сделать. Перейдите в файл index.html и прокрутите его вниз до строки 44. Этот блок div с идентификатором locations и будет основой нашей карусели. Чтобы превратить его в карусель, мы добавим к нему несколько классов. Итак, мы добавим классы carousel и slide. Вместе они обеспечивают некоторые стили для карусели. Затем мы добавим атрибут data-ride со значением carousel. Итак, опять же, атрибут данных связывается с JavaScript. JavaScript приводит карусель в движение. Атрибут называется data-ride по имени файла JavaScript в Bootstrap. Вот таким образом это все и работает.

Все названия атрибутов вы можете посмотреть в документации, и вам не нужно знать JavaScript, чтобы их использовать. ОК, после этого нам нужно добавить еще один блок div с классом carousel-inner. Я увеличу отступ для изображений, просто чтобы код было легче читать, и закрою этот div. Отлично. Итак, вот наш блок carousel-inner, и в него мы добавим еще один div с двумя классами - item и active.

Затем мы сдвинем вправо только первое изображение и закроем блок здесь. Итак, для чего это нужно? Каждое из изображений нам нужно поместить в блок div с классом item, но к тому изображению, с которого вы хотите начать карусель, нужно также добавить класс active. Таким образом вы можете указать, с какой картинки должна начинаться карусель. Я выбрала самое первое изображение, но вы можете выбрать любое другое. Я могу переместить класс active вниз и присвоить его, например, изображению номер пять, и карусель начнется с него.

ОК. Итак, я открою блок div с классом item и закрою его после изображения. Затем я скопирую этот div с классом item, увеличу отступ для всех изображений, и просто добавлю его через строку. Затем, конечно, мне нужно вернуться и закрыть все эти блоки. ОК. Итак, это и есть базовая разметка, которая вам понадобится, чтобы создать карусель.

Для этого мы добавили этот блок (запомните его идентификатор, потому что мы вернемся к нему через некоторое время), добавили к нему классы carousel и slide, а также атрибут data-ride со значением carousel. Каждое изображение должно быть заключено в блок div с классом item, а к начальному изображению также должен быть применен класс active. И конечно, все эти блоки заключены в блок с классом carousel-inner. Итак, если вы сохраните эту страницу и обновите ее в браузере, вы должны увидеть активную карусель.

На данный момент картинки должны сменяться каждые пять секунд. Это настройка по умолчанию для карусели Bootstrap. Что ж, карусель прекрасно работает уже сейчас. Но обратите внимание, здесь нет никаких подписей, кроме текста на самих изображениях. Здесь нет навигации, я не могу перейти вперед или назад. И здесь нет указателя на то, какой по счету слайд нам демонстрируется в данный момент. Я покажу вам, как настроить все эти элементы, в следующих видео, но самая простая карусель у нас уже готова.