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

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

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

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

Прежде всего, мы создадим тег span с классами glyphicon и glyphicon-chevron-left, закроем его, а затем создадим аналогичный тег, в котором заменим left на right. Итак, как вы знаете, эти классы - это коды глификонов. И если вы зайдете на сайт getbootstrap.com и просмотрите таблицу доступных символов и соответствующих им классов CSS, то увидите, что так обозначаются стрелки, которые мы поместим над нашей каруселью.

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

Мы добавим тег а с классом left, а также carousel-control, который будет определять стиль стрелки. Благодаря ему мы будем знать, как выглядит эта конкретная версия символа glyphicon-chevron-left. Затем мы добавим сюда наш знакомый атрибут, #locations. Откуда он взялся? Что ж, #locations ссылается на блок div с соответствующим идентификатором здесь, выше. Таким образом, он обозначает этот конкретный ряд элементов карусели. Также я собираюсь добавить к этому тегу атрибут data-slide со значением prev, как в слове previous. Итак, опять же, с помощью атрибутов data- вы привязываете к тегу JavaScript. Таким образом, атрибут data-slide привязывает JavaScript, который будет контролировать эти кнопки. Я смещу наш класс span на строку ниже, чтобы было легче читать, и закрою тег а. Вот так будет выглядеть наш код, и мы можем добавить такой ​​же тег прямо здесь, чуть выше, в span с классами glyphicon и glyphicon-chevron-right. Конечно, здесь мы тоже заменим left на right, так как эта стрелка будет отображаться с правой стороны изображения. Но остальной код останется тем же самым. И конечно, мы закроем тег а. Теперь сохраните страницу, вернитесь в браузер и обновите ее. Вот наши глификоны, с левой и с правой стороны. Как видите, при наведении на них курсора они подсвечиваются, и за ними появляется слегка затемненная область. И они на самом деле работают. Отличный результат. Но моя правая стрелка, похоже, сдвигает изображения влево, и левая стрелка делает то же самое. ОК, что же я сделала не так? Давайте вернемся обратно к коду, потому что я забыла изменить одну вещь. Если вы заметили, здесь, на строке 71, у нас есть атрибут data-slide со значением prev, и он правильный для левой стрелки.

Но я забыла изменить его здесь, когда копировала код. Итак, на строке 74, где у нас есть еще один data-slide, мы изменим его значение на next. Сохраните файл снова и перезагрузите страницу. И теперь правая стрелка будет двигать нашу карусель в правильном направлении, к следующему слайду, а левая - в обратную сторону, к предыдущему слайду.