问题描述
我正在使用 Django 框架制作电子商务网站。
我无法让我的引导轮播工作。单击指示器和控件无效。 我已经使用 NPM 提取了 Bootstrap 源文件。
main.html
<!DOCTYPE html>
{% load static %}
<html lang="fr">
<head>
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,initial-scale=1">
<link href="{% static 'css/main.css' %}" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>
{% block title %}
{% endblock title %}
</title>
</head>
<body class="mt-sm-5 mt-md-5 mt-lg-5 mt-xl-5">
<header>
<div class="container border-bottom border-primary border-1">
</div>
</header>
<section class="page-content" id="page-content">
{% block content %}
{% endblock content %}
</section>
<script src="{% static 'js/bootstrap.js' %}"></script>
</body>
</html>
product_details.html
{% extends 'main.html' %}
{% load static %}
{% block title %}
Boutique - {{ product.title }}
{% endblock title %}
{% block content %}
<div class="container">
<div class="row" >
<div id="product-carousel" class="col-sm-12 col-md-6 border border-danger carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#product-carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
{% if product.image2 %}
<button type="button" data-bs-target="#product-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
{% endif %}
{% if product.image3 %}
<button type="button" data-bs-target="#product-carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
{% endif %}
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{{ product.image.url }}" class="img-fluid" alt="...">
</div>
{% if product.image2 %}
<div class="carousel-item">
<img src="{{ product.image2.url }}" class="img-fluid" alt="...">
</div>
{% endif %}
{% if product.image3 %}
<div class="carousel-item">
<img src="{{ product.image3.url }}" class="img-fluid" alt="...">
</div>
{% endif %}
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#product-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">PrevIoUs</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#product-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="col-sm-12 col-md-6 border border-warning">
<h3> {{ product.title }} </h3>
<h4> {{ product.price }} € </h4>
<h5> {{ product.description }} </h5>
<h6> {{ product.category }} </h6>
{% if product.stock > 0 %}
<div class="container border border-success">
<div class="row" >
<div class="col">
<label for="select-qty">Quantity</label>
</div>
<div class="col">
<select class="form-select form-select-sm" aria-label=".form-select-sm example" id="select-qty">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="col">
<button id="add-to-cart-button" value="{{ product.id }}" type = "button" class="btn btn-success">Ajouter au panier</button>
</div>
</div>
</div>
{% endif %}
<div class="container">
<div class="row" >
<div class="col-sm-12 col-md-6">
<a class="btn btn-dark" href="{% url 'basket:basket_summary' %}">Panier</a>
</div>
<div class="col-sm-12 col-md-6">
<a class="btn btn-light" href="{% url 'store:all_products' %}">Voir les produits</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Add to cart
$(document).on('click','#add-to-cart-button',function (e) {
e.preventDefault();
$.ajax({
type: 'POST',url: '{% url "basket:basket_add" %}',data: {
productid: $('#add-to-cart-button').val(),productqty: $('#select-qty option:selected').val(),csrfmiddlewaretoken: "{{csrf_token}}",action: 'post',},success: function (json) {
document.getElementById("cart-count").innerHTML = json.qty;
},error: function (xhr,errmsg,err) {
},});
})
</script>
<script type="text/javascript">
$(function(){
$('#product-carousel').carousel();
});
</script>
{% endblock content %}
产品至少有图像（图像和图像 2）以及控件和指示器显示。但是点击它们时没有任何反应。
编辑
未捕获的语法错误：导入声明只能出现在模块的顶层
解决方法
您得到一个 <pre> <form class="form-inline">
<div class="form-group hidden">
<div class="input-group">
<input
name="datepicker"
class="form-control"
ngbDatepicker
#datepicker="ngbDatepicker"
[autoClose]="'outside'"
(dateSelect)="onDateSelection($event)"
[displayMonths]="2"
[dayTemplate]="t"
outsideDays="hidden"
[startDate]="startDate!"
tabindex="-1"
/>
<ng-template #t let-date let-focused="focused">
<span
class="custom-day"
[class.focused]="focused"
[class.range]="isRange(date)"
[class.faded]="isHovered(date) || isInside(date)"
(mouseenter)="hoveredDate = date"
(mouseleave)="hoveredDate = null"
>
{{ date.day }}
</span>
</ng-template>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input
#dpFromDate
class="form-control"
placeholder="yyyy-mm-dd"
name="dpFromDate"
[value]="formatter.format(startDate)"
(input)="
startDate = validateInput(startDate,dpFromDate.value)
"
/>
<div class="input-group-append">
<i
class="
fa fa-calendar
btn btn-outline-secondary
calendar
"
(click)="datepicker.toggle()"
type="button"
aria-hidden="true"
></i>
</div>
</div>
</div>
<div class="form-group ml-2">
<div class="input-group">
<input
#dpToDate
class="form-control"
placeholder="yyyy-mm-dd"
name="dpToDate"
[value]="formatter.format(endDate)"
(input)="endDate = validateInput(endDate,dpToDate.value)"
/>
<div class="input-group-append">
<i
class="
fa fa-calendar
btn btn-outline-secondary
calendar
"
(click)="datepicker.toggle()"
type="button"
aria-hidden="true"
></i>
</div>
</div>
</div>
</form></pre>
，因为您在加载 boostrap.js 之前调用了该函数。
试试这个，先加载boostrap.js（你可以从本地加载）
Uncaught TypeError: $(...).carousel is not a function然后添加您的自定义脚本
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>