Отсутствуют изображения Bootstrap Carousel

Я пытаюсь использовать карусель Bootstraps для циклического просмотра набора изображений. Однако изображения отсутствуют, и страница оказывается пустой.

Я использую это внутри файла .aspx, и меня беспокоит, что причина этого.

Задача состоит в том, чтобы на телевизоре была панель управления, которая циклически переключает изображения на сервере, обновляемые с помощью отдельного внутреннего процесса.

Используя chrome dev-tools, похоже, что это правильно циклически перебирает изображения. Кроме того, если я щелкну правой кнопкой мыши раздел, где находится карусель, я могу открыть изображение в новой вкладке, и оно там.

<%@ Page Language = "C#" AutoEventWireup = "true" CodeBehind = "test.aspx.cs" Inherits = "DisplayMonitors.test" %>

<!DOCTYPE html>

<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
    <title>testy</title>
    <link rel = "stylesheet" type = "text/css" href = "Content/bootstrap.min.css" />
    <style type = "text/css">
        body {background-color:#181818 !important;}
    </style>
    <script type = "text/javascript" src = "Scripts/jquery-3.3.1.min.js"></script>
    <script type = "text/javascript" src = "Scripts/bootstrap.min.js"></script>
    
</head>
<body>
    <form id = "FrmMain" runat = "server">
        <asp:ScriptManager ID = "ScriptManager1" runat = "server"> </asp:ScriptManager>
            <asp:Timer ID = "Timer1" runat = "server" OnTick = "TV_Refresh" Interval = "2000"> </asp:Timer>
            <asp:UpdatePanel ID = "UpdatePanel1" runat = "server" Visible = "False">
                <ContentTemplate>
                    <asp:Label ID = "Label1" runat = "server" Text = "Label"></asp:Label>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID = "Timer1" EventName = "Tick" />
                </Triggers>
            </asp:UpdatePanel>
        <h1 class = "text-white text-center">Fulfillment Ticket Creation and KPIs</h1>
        <div class = "container-fluid">
            <div class = "row">
                <div class = "col">
                    <img id = "overview" src = "images/overview.png" />
                </div>
                <div class = "col">
                    <div class = "row">
                        <div id = "metricCarousel" class = "carousel fade">
                            <div class = "carousel-inner">
                                <div class = "carousel-item active"><img class = "img-fluid" src = "images/metric1.png" /></div>
                                <div class = "carousel-item"><img class = "img-fluid" src = "images/metric2.png" /></div>
                                <div class = "carousel-item"><img class = "img-fluid" src = "images/metric3.png" /></div>
                                <div class = "carousel-item"><img class = "img-fluid" src = "images/metric4.png" /></div>
                                <div class = "carousel-item"><img class = "img-fluid" src = "images/metric5.png" /></div>
                                <div class = "carousel-item"><img class = "img-fluid" src = "images/metric6.png" /></div>
                            </div>
                        </div>
                    </div>
                    <div class = "row">
                        <div id = "graphcCarousel" class = "carousel fade">
                            <div class = "carousel-inner">
                                <div class = "carousel-item active"><img class = "img-fluid" src = "images/graph1.png" /></div>
                                <div class = "carousel-item"><img class = "img-fluid" src = "images/graph2.png" /></div>
                                <div class = "carousel-item"><img class = "img-fluid" src = "images/graph3.png" /></div>
                                <div class = "carousel-item"><img class = "img-fluid" src = "images/graph4.png" /></div>
                                <div class = "carousel-item"><img class = "img-fluid" src = "images/graph5.png" /></div>
                                <div class = "carousel-item"><img class = "img-fluid" src = "images/graph6.png" /></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>



    <script type = "text/javascript">
        $('.carousel').carousel({
            interval: 9000
        })
    </script>
</body>
</html>

Любая помощь будет принята с благодарностью!

Вам не хватает атрибута data-ride = "carousel" для вашего div карусели. Я смутно припоминаю, что этот недостающий кусок принес мне горе. Это могло быть так.

— 14.11.2018 01:57

Спасибо за ответ! Я добавил data-ride = "carousel", но изображения все еще отсутствуют. Тем не менее, похоже, что он работает правильно, так что это хорошие новости.

— 14.11.2018 16:14

javascript jquery asp.net bootstrap-4

14.11.2018 01:51

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Другие вопросы по теме

Как я могу заменить кусок строки с помощью jQuery?

Проблемы с JQuery в меню навигации

Попытка запустить jquery один раз после изменения размера

JQuery останавливает отправку формы

Ошибка в запросе Django Get, который не имеет смысла

Наведите указатель мыши на маленькое изображение, чтобы увеличить изображение с помощью панорамирования

Переместить содержимое <Script> в отдельный файл JS

Как правильно разделить данные из электронной почты в массив

Таблица групп и фильтров / поиска с HTML JQuery

Css Reveal Animation по горизонтали и останавливается на 50%

Отсутствуют изображения Bootstrap Carousel

Другие вопросы по теме

Похожие вопросы