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

Видео урок: Заголовки для карусели

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

Итак, на данный момент наша карусель работает, в ней чередуются изображения. На некоторых из них есть надписи, как, например, на этом - "Сан-Франциско", но на следующем слайде текста нет. Очевидно, это по-прежнему Сан-Франциско. Итак, что здесь можно сделать? Слова, которые вы видите, - например, эта большая надпись "Гонконг", на самом деле являются частью самого изображения. Они были добавлены в Photoshop. Я не могу изменить эти слова, если только не получу доступ к файлам Photoshop.

Тем не менее, для некоторых изображений, таких как это, я могу добавить какие-нибудь надписи. Просто чтобы пользователи знали, на что они смотрят. Итак, в этом видео я покажу вам, как это сделать. Откройте файл index.html. Код, с которым мы собираемся работать, начинается на строке 49. И это разметка для изображения номер два. Сейчас мы собираемся работать с изображениями под четными номерами, которые не имеют подписей. Итак, если я хочу добавить текст на этот слайд, например, слайд номер два, мне нужно сделать следующее.

Я добавлю еще один блок div с классом carousel-caption. Затем внутри этого блока я могу добавить сам текст подписи. Он может быть сколько угодно длинным. Вы можете использовать в нем любые теги и так далее. В этом случае я хочу использовать H3. Это Саи Ван Бич в Гонконге, и закрывающий h3. Чтобы повторить это для других изображений, просто скопируйте этот код для подписи в строках 51 - 53.

Я просто добавлю его для четвертой картинки в строку 60, на которой изображены лондонские телефонные будки. На шестой картинке в строке 68 изображен мост Понт Неф в Париже. И наконец, на слайде номер восемь у нас изображен мост Золотые Ворота в сумерках. ОК. Итак, мы создали подписи для карусели. Их не обязательно добавлять для каждого слайда.

Я решила добавить их только для изображений без текста. Если хотите, можете добавить только одну подпись на один слайд. Можете добавить их на все слайды. Используйте подписи, как вам нравится. Я добавила сюда только заголовки. Вы можете добавить целые параграфы текста, что угодно. Вы даже можете убрать картинки и использовать в карусели только подписи. ОК, давайте сохраним страницу, вернемся в браузер и обновим ее. Как видите, вот подпись для пляжа, вот подпись для телефонных будок, для парижского моста и для моста Золотые Ворота. Теперь, конечно, к подписям применяется стиль и расположение по умолчанию. С помощью CSS вы можете изменить их местоположение на странице на любое другое. Но имейте в виду, что при уменьшении экрана это местоположение может измениться. Поэтому все не так просто, как можно было ожидать.

Чтобы показать вам, что я имею в виду, я начну уменьшать экран, и как видите, карусель тоже будет уменьшаться. Обратите внимание, как на странице двигаются подписи по мере того, как экран становится все меньше. Таким образом, подписи будут смещаться. Вы можете попробовать написать медиа-запрос, чтобы решить эту проблему, если хотите. Но в любом случае, если вы попытаетесь изменить стили по умолчанию, имейте это в виду.