Bootstrap 4 Carousel前后切换按钮失效问题求助

嘿，我明白独自啃小组项目bug的痛苦！看了你的代码后，找到了几个导致Bootstrap 4 Carousel无法切换的关键问题，咱们一个个来解决：

1. 轮播容器的属性语法错误 #

在landing.php里的轮播外层div有明显的语法问题：

<div id="carousel" class="carousel slide" content="width=device-width data-ride="carousel">

这里有两个坑：

• 多余的content="width=device-width"：viewport的设置已经在layout.php的<head>里定义过了，这里完全没必要加；
• 引号嵌套冲突：data-ride="carousel"的双引号和前面content属性的双引号撞在一起了，导致浏览器根本读不懂data-ride这个关键属性（Bootstrap靠它自动初始化轮播）。

修正后代码：

<div id="carousel" class="carousel slide" data-ride="carousel">

2. 漏加了Bootstrap的JavaScript文件 #

你的layout.php只引入了Bootstrap的CSS，但没加Bootstrap的JS！轮播的切换逻辑全靠Bootstrap JS驱动，必须补上这一行，把它放在Popper.js之后、自定义main.js之前最合适：

<script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

3. 重复加载jQuery导致冲突 #

在layout.php的<head>里，你同时加载了两个版本的jQuery：一个是完整版，一个是Slim版。这会让jQuery对象互相冲突，直接搞崩Bootstrap的功能。只留一个就行，Bootstrap 4推荐用Slim版（体积小，够用），所以删掉完整版的那行代码。

修正后的关键代码片段 #

调整后的layout.php 部分： #

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!-- 只保留Slim版jQuery -->
    <script defer src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <title>Kamps For Kids</title>
    <link rel="stylesheet" href="views/styles/styles.css">
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <!-- 新增Bootstrap JS -->
    <script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    <script defer src="views/scripts/main.js"></script>
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
</head>

调整后的landing.php轮播容器： #

<div id="carousel" class="carousel slide" data-ride="carousel">
    <!-- 后续的指示器、幻灯片、控制按钮代码保持不变即可 -->
</div>

改完这些之后，你的轮播应该就能正常切换啦！如果还是有问题，可以打开浏览器的开发者工具（F12）看看控制台有没有报错，也可以检查一下图片路径是不是正确的。

内容的提问来源于stack exchange，提问作者user71311