【发布时间】：2022-01-24 20:12:56
【问题描述】：
我刚开始使用引导程序，我正在尝试使用轮播幻灯片，我正在添加按钮以及自动幻灯片。我在代码中实现了引导轮播幻灯片，但它只是不动。我按下按钮，它仍然不会移动。我不知道我做错了什么。
我刚刚编辑了添加整个脚本的代码，我面临的问题是在推荐部分...
这是我的代码；
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tindog</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;900&family=Ubuntu:wght@300;400;700&display=swap"
rel="stylesheet"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
crossorigin="anonymous"
/>
<!-- CSS StyleSheets -->
<link rel="stylesheet" href="css/styles.css" />
<!-- Font Awesome Icons -->
<script
src="https://kit.fontawesome.com/40d4d3ba0c.js"
crossorigin="anonymous"
></script>
</head>
<body>
<section id="title">
<!-- Nav Bar -->
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">tindog</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-dark btn-lg download-button">
<i class="fab fa-apple"></i> Download
</button>
<button
type="button"
class="btn btn-outline-light btn-lg download-button"
>
<i class="fab fa-google-play"></i>
Download
</button>
</div>
<div class="col-lg-6">
<img
class="title-image"
src="images/iphone6.png"
alt="iphone-mockup"
/>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="row">
<div class="feature-box col-lg-4">
<i class="icon fas fa-check-circle fa-4x"></i>
<h3>Easy to use.</h3>
<p>So easy to use, even your dog could do it.</p>
</div>
<div class="feature-box col-lg-4">
<i class="icon fas fa-bullseye fa-4x"></i>
<h3>Elite Clientele</h3>
<p>We have all the dogs, the greatest dogs.</p>
</div>
<div class="feature-box col-lg-4">
<i class="icon fas fa-heart fa-4x"></i>
<h3>Guaranteed to work</h3>
<p>Find the love of your dog's life or get your money back.</p>
</div>
</div>
</section>
<!-- Testimonials -->
<section id="testimonials">
<div id="carouselControls" class="carousel slide" data-bs-ride="false">
<div class="carousel-inner">
<div class="carousel-item active">
<h2>
I no longer have to sniff other dogs for love. I've found the
hottest Corgi on TinDog. Woof.
</h2>
<img
class="testimonial-img"
src="images/dog-img.jpg"
alt="dog-profile"
/>
<em>Pebbles, New York</em>
</div>
<div class="carousel-item">
<h2 class="testimonial-text">
My dog used to be so lonely, but with the TinDog's help, He has
found the love of his life. I think
</h2>
<img
src="images/lady-img.jpg"
alt="lady-profile"
class="testimonial-img"
/>
<em>Beverly, illinois</em>
</div>
</div>
<button
class="carousel-control-prev"
type="button"
data-bs-target="#carouselControls"
data-bs-slide="prev"
>
<span class="carousel-control-prev-icon"></span>
</button>
<button
class="carousel-control-next"
type="button"
data-bs-target="#carouselControls"
data-bs-slide="next"
>
<span class="carousel-control-next-icon"></span>
</button>
</div>
</section>
<!-- Press -->
<section id="press">
<img class="press-img" src="images/TechCrunch.png" alt="tc-logo" />
<img class="press-img" src="images/tnw.png" alt="tnw-logo" />
<img
class="press-img"
src="images/bizinsider.png"
alt="biz-insider-logo"
/>
<img class="press-img" src="images/mashable.png" alt="mashable-logo" />
</section>
<!-- Pricing -->
<section id="pricing">
<h2>A Plan for Every Dog's Needs</h2>
<p>Simple and affordable price plans for you and your dog.</p>
<h3>Chihuahua</h3>
<h2>Free</h2>
<p>5 Matches Per Day</p>
<p>10 Messages Per Day</p>
<p>Unlimited App Usage</p>
<button class="button">Sign Up</button>
<h3>Labrador</h3>
<h2>$49 / mo</h2>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button class="button">Sign Up</button>
<h3>Mastiff</h3>
<h2>$99 / mo</h2>
<p>Priority Listing</p>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button class="button">Sign Up</button>
</section>
<!-- Call to Action -->
<section id="cta">
<h3>Find the True Love of Your Dog's Life Today.</h3>
<button class="button">Download</button>
<button class="button">Download</button>
</section>
<!-- Footer -->
<footer id="footer">
<p>© Copyright 2021 TinDog</p>
</footer>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<!-- <script
src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
crossorigin="anonymous"
></script> -->
<!-- Option 2: Separate Popper and Bootstrap JS -->
<script
src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"
integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2"
crossorigin="anonymous"
></script>
</body>
</html>【问题讨论】：
标签： html css bootstrap-4