Bootstrap Carousel指示器点击无响应问题求助及解决记录

我最近碰到一个Bootstrap轮播的小问题：点击轮播的指示器完全没反应，页面始终只显示当前激活的幻灯片。项目里没有用任何自定义的CSS或JS，完全依赖Bootstrap自带的功能。

当时的代码是这样的：

<link rel="stylesheet" href="inc/css/bootstrap.css">
<link rel="stylesheet" href="inc/css/styles.css">
<!-- Start Img Slider -->
<div id="slide " class="carousel h-100 mw-100 " data-ride="carousel">
<ol class="carousel-indicators ">
<li data-target="slide" data-slide-to="0" class="active"></li>
<li data-target="slide" data-slide-to="1"></li>
<li data-target="slide" data-slide-to="2"></li>
</ol>
<div class="carousel-inner img-fluid" role=listbox>
<!-- slide 1 -->
<div class="carousel-item active " style="background-image: url(images/team1.jpg); background-repeat: no-repeat;">
<div class="carousel-caption">
</div>
</div>
<!-- slide 2 -->
<div class="carousel-item " style="background-image: url(images/team2.png); background-repeat: no-repeat;">
<div class="carousel-caption">
</div>
</div>
<!-- slide 3 -->
<div class="carousel-item " style="background-image: url(images/team3.png); background-repeat: no-repeat;">
<div class="carousel-caption">
</div>
</div>
</div>
</div>
<!-- end Img Slider -->
<script src="inc/js/jquery-3.4.1.min.js"></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="inc/js/bootstrap.js"></script>

后来仔细检查代码才发现问题所在：data-target属性遗漏了ID选择器的#符号。Bootstrap的Carousel指示器需要通过data-target关联到轮播容器的ID，而原代码里的data-target="slide"没有加#，导致Bootstrap找不到对应的轮播容器，自然点击指示器就没反应了。

修正后的指示器代码如下：

<ol class="carousel-indicators ">
<li data-target="#slide" data-slide-to="0" class="active"></li>
<li data-target="#slide" data-slide-to="1"></li>
<li data-target="#slide" data-slide-to="2"></li>
</ol>

只需要给每个li的data-target属性加上#，让它正确指向轮播容器的ID#slide，指示器就能正常切换幻灯片了。

内容的提问来源于stack exchange，提问作者Tarık Suyabatmaz