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

Видео урок: Стилизация индикатора позиции для карусели

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

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

Итак, перейдите к файлу index.html и найдите, где в нем начинается код для карусели. Мы собираемся добавить индикаторы слайдов для карусели прямо здесь, на строке 45, сразу после блока div с идентификатором locations. И они будут закодированы как упорядоченный список. Почему упорядоченный? Потому что, конечно, порядок слайдов здесь важен. Таким образом, мы добавляем тег ol с классом carousel-indicators и закрываем ol. Это один из немногих случаев, когда порядок изображений на самом деле имеет значение. Затем, конечно, мы добавим ряд тегов li. К этим тегам мы применим два атрибута данных. Первый - data-target со значением locations. Опять же, этот атрибут использует функциональность JavaScript, и здесь мы сообщаем JavaScript, что этот код должен быть индикатором для карусели, которая находится в блоке div с идентификатором locations.

Как вы понимаете, если вы измените идентификатор этого блока на какой-нибудь другой, вам придется сделать очень много замен в коде, потому что мы используем его довольно часто. Еще один атрибут данных, который мы сюда добавим, - это data-slide-to. Он указывает, какому слайду соответствует данный индикатор. Очевидно, это первый индикатор, и он будет соответствовать слайду номер один. Итак, какое число я хочу сюда записать? Один? Нет! Потому что мы должны считать как инженеры.

Обычно люди считают один, два, три, четыре, пять. Как считают инженеры? Они начинают с ноля. Ноль, один, два, три, четыре, пять. Таким образом, это будет data-slide-to со значением ноль. Затем мы добавим к этому конкретному индикатору класс active, потому что, конечно, он соответствует первому изображению, которое тоже отмечено классом active здесь, в строке 50. Так вот, самый первый индикатор для карусели также должен быть отмечен классом active.

Если вы, скажем, захотите сделать начальным изображение номер пять и примените к нему класс active, то что вы должны будете записать в атрибуте data-slide-to? Номер четыре, и тоже применить к нему класс active. ОК, теперь давайте закроем этот li. И я просто скопирую его на вторую строку. Здесь data-slide-to будет содержать значение один. И мы удалим класс active, потому что он у нас уже есть в предыдущем li.

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

Они кликабельны, и по ним мы можем переходить к любым другим слайдам. И конечно, местоположение индикаторов определяется в файле CSS, и по желанию вы можете переместить их, но опять же, имейте в виду, что при изменении размера экрана они тоже будут смещаться. Определенно, это нужно учитывать для экранов с маленьким разрешением.