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 轮播指示器和控件不起作用。为啥?的主要内容,如果未能解决你的问题,请参考以下文章

无法更改 Bootstrap 5 轮播指示器边框半径

bootstrap 5 轮播控件不起作用并且指示器不显示

每页多个轮播 Bootstrap 5

如何让 Bootstrap 3 轮播指示器立即改变

轮播指示器在 Bootstrap 上不起作用

如何在 Xamarin.Forms 中为轮播实现活动指示器?