Я пытаюсь включить компонент карусели в мою веб-страницу, но он пересекается с панелью навигации. Я попытался удалить панель навигации, но компонент карусели исчезает. HTML-код написан как шаблон для Django. Я проверил импорт изображений в консоли, и изображение взято из исходной папки. В исходной папке нет проблем.
Вот HTML-код для компонента карусели a.html:
{%extends 'common.html'%} {%block content%}
<div id="slides" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#slides" data-slide-to="0" class="active"></li>
<li data-target="#slides" data-slide-to="1"></li>
<li data-target="#slides" data-slide-to="2"></li>
<li data-target="#slides" data-slide-to="3"></li>
<li data-target="#slides" data-slide-to="4"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item">
<img src="/static/images/home/1.JPG" />
</div>
<div class="carousel-item">
<img src="/static/images/home/2.JPG" />
</div>
<div class="carousel-item">
<img src="/static/images/home/3.JPG" />
</div>
<div class="carousel-item">
<img src="/static/images/home/4.JPG" />
</div>
<div class="carousel-item">
<img src="/static/images/home/5.JPG" />
</div>
</div>
</div>
Вот код для common.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="/static/frontend/bootstrap.min.css" />
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="/static/css/style.css" />
</head>
<body>
{%load static%}
<div id="navbar">
<script src="{% static 'javascript/Navbar.js' %}"></script>
</div>
<div id="dashboard">
{%block content%} {%endblock%}
</div>
</body>
</html>