引导指示器和滑动控件不起作用

Posted

技术标签:

【中文标题】引导指示器和滑动控件不起作用【英文标题】：Bootstrap indicators and slide controls not working 【发布时间】：2021-12-11 12:54:08 【问题描述】：

我正在使用this 作为学习如何使用缩略图制作轮播的一种方式，我正在做他们所做的（或者我认为我已经做过），但点击缩略图不起作用，指标也不起作用。我唯一改变的是使用新版本的引导程序的 CDN。我也尝试使用其他 cdn，但似乎无法正常工作。

    <!doctype html>
    <html lang="en">
      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    
        <title>Hello, world!</title>
      </head>
      <body>
        <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div id="custCarousel" class="carousel slide" data-ride="carousel" align="center">
                    <!-- slides -->
                    <div class="carousel-inner">
                        <div class="carousel-item active"> <img src="https://i.imgur.com/weXVL8M.jpg" > </div>
                        <div class="carousel-item"> <img src="https://i.imgur.com/Rpxx6wU.jpg" > </div>
                        <div class="carousel-item"> <img src="https://i.imgur.com/83fandJ.jpg" > </div>
                        <div class="carousel-item"> <img src="https://i.imgur.com/JiQ9Ppv.jpg" > </div>
                    </div> <!-- Left right --> <a class="carousel-control-prev" href="#custCarousel" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#custCarousel" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> <!-- Thumbnails -->
                    <ol class="carousel-indicators list-inline">
                        <li class="list-inline-item active"> <a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#custCarousel"> <img src="https://i.imgur.com/weXVL8M.jpg" class="img-fluid"> </a> </li>
                        <li class="list-inline-item"> <a id="carousel-selector-1" data-slide-to="1" data-target="#custCarousel"> <img src="https://i.imgur.com/Rpxx6wU.jpg" class="img-fluid"> </a> </li>
                        <li class="list-inline-item"> <a id="carousel-selector-2" data-slide-to="2" data-target="#custCarousel"> <img src="https://i.imgur.com/83fandJ.jpg" class="img-fluid"> </a> </li>
                        <li class="list-inline-item"> <a id="carousel-selector-2" data-slide-to="3" data-target="#custCarousel"> <img src="https://i.imgur.com/JiQ9Ppv.jpg" class="img-fluid"> </a> </li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <style>
    body 
        background-color: #7B1FA2
    
    
    .container 
        margin-top: 100px;
        margin-bottom: 100px
    
    
    .carousel-inner img 
        width: 100%;
        height: 100%
    
    
    #custCarousel .carousel-indicators 
        position: static;
        margin-top: 20px
    
    
    #custCarousel .carousel-indicators>li 
        width: 100px
    
    
    #custCarousel .carousel-indicators li img 
        display: block;
        opacity: 0.5
    
    
    #custCarousel .carousel-indicators li.active img 
        opacity: 1
    
    
    #custCarousel .carousel-indicators li:hover img 
        opacity: 0.75
    
    
    .carousel-item img 
        width: 80%
    
    </style>
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/boosted/5.1.3/js/boosted.bundle.min.js" integrity="sha512-m4KgsHOciE4s/A5Z1xqQDBmWy/pKpI8RbrsX6r/vl6L/NZ/P2PHtleVfOa3ChD1JBBfyqTFbnCJbcLGTis4QLQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
      </body>
    </html>

【问题讨论】：

你在加载所有的 boostrap 依赖吗？即 Bootstrap JS 包等。我看到你正在加载 jQuery 并“提升”但我不是你加载 BS JS 核心包？ 【参考方案1】：

想通了。我使用的是旧的引导语法 data-slide-to 而不是 data-bs-slide-to。

【讨论】：

太棒了。请记住选择正确的答案并突出显示您更改的所有内容，以便每个人都可以从中受益。突出显示此答案并且您更改了脚本源【参考方案2】：

您的错误似乎与 JS 未正确加载有关。在代码的底部，您使用了错误的 JS“Boosted”而不是 Bootstrap。

<script src="https://cdnjs.cloudflare.com/ajax/libs/boosted/5.1.3/js/boosted.bundle.min.js" integrity="sha512-m4KgsHOciE4s/A5Z1xqQDBmWy/pKpI8RbrsX6r/vl6L/NZ/P2PHtleVfOa3ChD1JBBfyqTFbnCJbcLGTis4QLQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

用来自 CDN 的正确 Bootstrap JS 替换该标签，如下所示：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

【讨论】：

感谢您的宝贵时间，我更改了 CDN，但仍然无法正常工作。当你说 JS 没有加载时，你如何检查。

以上是关于引导指示器和滑动控件不起作用的主要内容，如果未能解决你的问题，请参考以下文章

Twitter-Bootstrap 5 轮播指示器和控件不起作用。为啥？

引导指标在点击时不起作用

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

使用 ASP.NET MVC C# 和引导日期选择器将不起作用

引导选项卡内容 slideDown/slideUp 不起作用

UIRefresh 控件 endRefreshing 不起作用