Twitter-Bootstrap 5 轮播指示器和控件不起作用。为啥？
Posted
技术标签:
【中文标题】Twitter-Bootstrap 5 轮播指示器和控件不起作用。为啥？【英文标题】：Twitter-Bootstrap 5 carousel indicators and controls not working. Why?Twitter-Bootstrap 5 轮播指示器和控件不起作用。为什么？ 【发布时间】：2021-09-06 01:47:39 【问题描述】：我正在使用 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" >
</div>
% if product.image2 %
<div class="carousel-item">
<img src=" product.image2.url " class="img-fluid" >
</div>
% endif %
% if product.image3 %
<div class="carousel-item">
<img src=" product.image3.url " class="img-fluid" >
</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）以及控件和指示器显示。但是点击它们时没有任何反应。
编辑
在浏览器控制台中，我有两个错误。
未捕获的语法错误：导入声明只能出现在模块的顶层
未捕获的类型错误：$(...).carousel 不是函数
【问题讨论】：
浏览器控制台有错误吗？ 是的。我已经编辑了我的帖子。由于我是 JS 新手，所以我并不真正了解这些错误。 【参考方案1】：您得到一个Uncaught TypeError: $(...).carousel is not a function，因为您在加载 boostrap.js 之前调用了该函数。
试试这个，首先加载 boostrap.js（你可以从本地加载它）
<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>
然后添加您的自定义脚本
<script type="text/javascript">
$(function()
$('#product-carousel').carousel();
);
</script>
【讨论】：
谢谢。但是为什么我必须从 CDN 直接访问 bootstrap.js 呢？如果我从 node_modules 导入 bootstrap.js，它不起作用... 我不确定，可能是因为任何安装错误或任何版本不匹配。以上是关于Twitter-Bootstrap 5 轮播指示器和控件不起作用。为啥？的主要内容，如果未能解决你的问题，请参考以下文章