Индикаторы карусели начальной загрузки не работают
Кажется, я не могу понять, почему индикаторы карусели не кликабельны, как в примерах карусели Boostrap 4, которые я видел. Из того, что я видел, эта функция должна работать без дополнительного кода, а мой - нет. Я не вижу, что я сделал не так, потому что все, что я сделал, это скопировал карусель из документов Boostrap, а затем добавил некоторый контент. Я хотел бы иметь интерактивный текст в качестве индикаторов для каждого слайда. Что я сделал не так?
.carousel-indicators {
background-color: blue;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel = "stylesheet" />
<section class = "drinks_menu">
<div class = "container">
<div id = "drinks_carousel" class = "slide" data-ride = "carousel">
<ul class = "carousel-indicators">
<li data-target = "#drinks_carousel" data-slide-to = "0" class = "active">HOT DRINKS</li>
<li data-target = "#drinks_carousel" data-slide-to = "1">SOFT DRINKS</li>
<li data-target = "#drinks_carousel" data-slide-to = "2">BEER</li>
<li data-target = "#drinks_carousel" data-slide-to = "3">WINE</li>
<li data-target = "#drinks_carousel" data-slide-to = "4">SPIRITS</li>
</ul>
<div class = "carousel-inner">
<div class = "carousel-item active">
<div class = "row">
<div class = "col-12">
<h2 class = "heading">HOT DRINKS</h2>
</div>
</div>
<div class = "row">
<ul class = "menu_list">
<li>Espresso <span>£1.80</span></li>
<li>Espresso macchiato <span>£1.90</span></li>
<li>Tea - peppermint / green / camomile / earl grey / yorkshire <span>£1.90</span></li>
<li>Americano <span>£2.00</span></li>
<li>Caffe latte <span>£2.40</span></li>
</ul>
<ul class = "menu_list">
<li>Flat white <span>£2.60</span></li>
<li>Cappucino <span>£2.40</span></li>
<li>Mocha <span>£2.60</span></li>
<li>Hot chocolate <span>£2.40</span></li>
</ul>
</div>
</div>
<div class = "carousel-item">
<div class = "row">
<div class = "col-12">
<h2 class = "heading">SOFT DRINKS</h2>
</div>
</div>
<div class = "row">
<ul class = "menu_list">
<li>San pellegrino cans – blood orange / limonata/ orange pomegranate<span>£1.80</span></li>
<li>Harrogate spring still water <span>£1.40</span></li>
<li>Smeraldina sparkling water<span>£2.00</span></li>
</ul>
<ul class = "menu_list">
<li>Fresh juice – orange / apple <span>£1.80</span></li>
<li>Coca cola / sprite <span>£1.50</span></li>
</ul>
</div>
</div>
<div class = "carousel-item">
<div class = "row">
<div class = "col-12">
<h2 class = "heading">BEER</h2>
</div>
</div>
<div class = "row">
<ul class = "menu_list full">
<li>Draught – birra moretti <span>½ pint £2.20</span>span> <span>Pint £4.40</span></li>
<li>Speciality birra moretti<span>toscana £4.80</span> <span>siciliana £4.80</span></li>
</ul>
</div>
</div>
<div class = "carousel-item">
<div class = "row">
<div class = "col-12">
<h2 class = "heading">WINE</h2>
</div>
</div>
<div class = "row">
<ul class = "menu_list">
<li class = "section_title">House</li>
<li>Tenuta san marco white / red<span>125ML £2.75</span> <span>250ML £5.50</span> <span>500ML carafe £11.00</span></li>
<li class = "section_title">Red</li>
<li>Malbec- El Finatello; Chile <span>250ML £6.50</span> <span>Bottle £19.50</span></li>
<li>Chianti D.O.C. - Vernaiolo; Italy <span>250ML £7.00</span> <span>Bottle £21.00</span></li>
</ul>
<ul class = "menu_list">
<li class = "section_title">White</li>
<li>Gavi Di Gavi – conti speroni; Italy <span>250ML £7.00</span> <span>Bottle £21.00</span></li>
<li>Sauvignon Blanc- Clifford Quay; New Zealand <span>250ML £7.50</span> <span>Bottle £22.00</span></li>
<li class = "section_title">Rose</li>
<li>Pinot Grigio Rose – Villa Serena; Italy <span>250ML £6.50</span> <span>Bottle £19.50</span> </li>
</ul>
<ul class = "menu_list">
<li class = "section_title">Prosecco</li>
<li>Miol D.O.C. Treviso – Italy <span>125ML £6.00</span> <span>Bottle £24.00</span></li>
</ul>
</div>
</div>
<div class = "carousel-item">
<div class = "row">
<div class = "col-12">
<h2 class = "heading">SPIRITS</h2>
</div>
</div>
<div class = "row">
<ul class = "menu_list">
<li>Aperol Spritz <span>£6.90</span></li>
<li>Grappa Invecchiata<span>£3.50</span></li>
</ul>
<ul class = "menu_list">
<li>Limoncello <span>£3.50</span></li>
<li>Malfy Gin & Fever Tree Tonic – Sicilian bloody orange / Sicilian pink grapefruit / Limone / Originale <span>£6.50</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
0
507
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Вам не хватает этого <div id = "drinks_carousel" class = "carousel slide" data-ride = "carousel">
класс carousel отсутствует в div. проверьте это.
.carousel-indicators {
background-color: blue;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel = "stylesheet" />
<section class = "drinks_menu">
<div class = "container">
<div id = "drinks_carousel" class = "carousel slide" data-ride = "carousel">
<ul class = "carousel-indicators">
<li data-target = "#drinks_carousel" data-slide-to = "0" class = "active">HOT DRINKS</li>
<li data-target = "#drinks_carousel" data-slide-to = "1">SOFT DRINKS</li>
<li data-target = "#drinks_carousel" data-slide-to = "2">BEER</li>
<li data-target = "#drinks_carousel" data-slide-to = "3">WINE</li>
<li data-target = "#drinks_carousel" data-slide-to = "4">SPIRITS</li>
</ul>
<div class = "carousel-inner">
<div class = "carousel-item active">
<div class = "row">
<div class = "col-12">
<h2 class = "heading">HOT DRINKS</h2>
</div>
</div>
<div class = "row">
<ul class = "menu_list">
<li>Espresso <span>£1.80</span></li>
<li>Espresso macchiato <span>£1.90</span></li>
<li>Tea - peppermint / green / camomile / earl grey / yorkshire <span>£1.90</span></li>
<li>Americano <span>£2.00</span></li>
<li>Caffe latte <span>£2.40</span></li>
</ul>
<ul class = "menu_list">
<li>Flat white <span>£2.60</span></li>
<li>Cappucino <span>£2.40</span></li>
<li>Mocha <span>£2.60</span></li>
<li>Hot chocolate <span>£2.40</span></li>
</ul>
</div>
</div>
<div class = "carousel-item">
<div class = "row">
<div class = "col-12">
<h2 class = "heading">SOFT DRINKS</h2>
</div>
</div>
<div class = "row">
<ul class = "menu_list">
<li>San pellegrino cans – blood orange / limonata/ orange pomegranate<span>£1.80</span></li>
<li>Harrogate spring still water <span>£1.40</span></li>
<li>Smeraldina sparkling water<span>£2.00</span></li>
</ul>
<ul class = "menu_list">
<li>Fresh juice – orange / apple <span>£1.80</span></li>
<li>Coca cola / sprite <span>£1.50</span></li>
</ul>
</div>
</div>
<div class = "carousel-item">
<div class = "row">
<div class = "col-12">
<h2 class = "heading">BEER</h2>
</div>
</div>
<div class = "row">
<ul class = "menu_list full">
<li>Draught – birra moretti <span>½ pint £2.20</span>span> <span>Pint £4.40</span></li>
<li>Speciality birra moretti<span>toscana £4.80</span> <span>siciliana £4.80</span></li>
</ul>
</div>
</div>
<div class = "carousel-item">
<div class = "row">
<div class = "col-12">
<h2 class = "heading">WINE</h2>
</div>
</div>
<div class = "row">
<ul class = "menu_list">
<li class = "section_title">House</li>
<li>Tenuta san marco white / red<span>125ML £2.75</span> <span>250ML £5.50</span> <span>500ML carafe £11.00</span></li>
<li class = "section_title">Red</li>
<li>Malbec- El Finatello; Chile <span>250ML £6.50</span> <span>Bottle £19.50</span></li>
<li>Chianti D.O.C. - Vernaiolo; Italy <span>250ML £7.00</span> <span>Bottle £21.00</span></li>
</ul>
<ul class = "menu_list">
<li class = "section_title">White</li>
<li>Gavi Di Gavi – conti speroni; Italy <span>250ML £7.00</span> <span>Bottle £21.00</span></li>
<li>Sauvignon Blanc- Clifford Quay; New Zealand <span>250ML £7.50</span> <span>Bottle £22.00</span></li>
<li class = "section_title">Rose</li>
<li>Pinot Grigio Rose – Villa Serena; Italy <span>250ML £6.50</span> <span>Bottle £19.50</span> </li>
</ul>
<ul class = "menu_list">
<li class = "section_title">Prosecco</li>
<li>Miol D.O.C. Treviso – Italy <span>125ML £6.00</span> <span>Bottle £24.00</span></li>
</ul>
</div>
</div>
<div class = "carousel-item">
<div class = "row">
<div class = "col-12">
<h2 class = "heading">SPIRITS</h2>
</div>
</div>
<div class = "row">
<ul class = "menu_list">
<li>Aperol Spritz <span>£6.90</span></li>
<li>Grappa Invecchiata<span>£3.50</span></li>
</ul>
<ul class = "menu_list">
<li>Limoncello <span>£3.50</span></li>
<li>Malfy Gin & Fever Tree Tonic – Sicilian bloody orange / Sicilian pink grapefruit / Limone / Originale <span>£6.50</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>@Reece Я только что понял, что мы не должны пропустить это, а не винить их: D
—
18.12.2018 17:22
Другие вопросы по теме
Добавить границу к траектории обрезки
Свяжите весь DIV
Страница заполнения HTML-содержимого, но с возможностью прокрутки к другому содержимому
Как сделать дочерний div на всю ширину области просмотра браузера, игнорируя родительскую позицию (поля и отступы) и ширину
Добавить значок перед текстом (несколько строк) css
HTML - имитация размера окна браузера (меньше или больше)
Укладка tr в один стол
Различные цвета при наведении курсора, когда элемент щелкают, но не щелкают в JQuery
Встроенный стиль определяет высоту заголовка, вызывает отступы над и под логотипом
Микроформаты / схемы для библиографии и цитат
Похожие вопросы
Как добавить итерации к этой жидкости для цикла
Как извлечь атрибуты тегов с помощью простого html dom?
Как нарисовать карту с помощью geojson с d3.js
Свяжите весь DIV
VsVim - vit и vat работают некорректно
Невозможно отправить электронную почту в PHP через HTML-форму
Как сохранить значение переменной, если проверка не выполняется в codeigniter
Страница заполнения HTML-содержимого, но с возможностью прокрутки к другому содержимому
Как сделать дочерний div на всю ширину области просмотра браузера, игнорируя родительскую позицию (поля и отступы) и ширину
Добавить значок перед текстом (несколько строк) css
Спасибо, не думаю, что я бы это заметил. Да, им, наверное, стоит упомянуть об этом. Но похоже, что я случайно удалил этот класс