在遵循官方 Bootstrap 教程后，我正在尝试运行包含三张图片的轮播。出于询问的目的，我更改了链接，但问题仍然存在。虽然箭头似乎以一种或另一种方式响应，但图像永远不会改变。我尝试使用 jQuery 专门调用该问题，但无济于事。我需要能够旋转至少三个图像才能成功。我一直在使用 Google Chrome 作为我的浏览器。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.1.0/lux/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>My Art</title>
</head>
<body>
<!-- Navbar Start -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="index.html">Daniye S. Bartell</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Art</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
</ul>
</div>
</nav>
<!-- Navbar End -->
<!-- Start Main Container -->
<div id="main-art" class="container-fluid">
<div class="text-center art-paragraph">
<h1>Glitch Art</h1>
<p>Glitch art has been a passion of mine for about two years now. It never gets old learning new ways to break computer logic and reasoning. It goes without saying that I've broken many a file, but I've never considered those failures. I've thought of them as methods of discovery for new ways to create beautiful new images. I've turned some pictures into sound, taken the hex code and inserted song lyrics, reformatted them in text editors and much, much more. Currently I'm working on a web app that makes it easy for the average person to make their own glitch art! Found below are some of my favorite pieces of work. Generally the style is characterized by misplaced RGB patterns, high saturation and sliding pixels- but the magic of it all is that it's so unpredictable what you'll get! I hope you enjoy looking at my work as much as I did making it.</p>
</div>
<!-- Carousel Code Start -->
<div class="carousel slide" id="glitchCarousel" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<!-- Carousel Items -->
<div class="carousel-item active">
<img src="https://topbackgroundwallpaper.com/wp-content/uploads/2018/01/space-1080p-wallpaper-space-cataclysm-planet-art-explosion-asteroids-comets-fragments-98315-1920x1080.jpg" alt="First Pic" class="d-block w-100"/>
</div>
<div class="carousel-item">
<img src="https://i.imgur.com/zIRiIpc.jpg" alt="Second Pic" class="d-block w-100"/>
</div>
<div class="carousel-item">
<img src="https://i.imgur.com/OlMlERn.jpg" alt="Third Pic" class="d-block w-100"/>
</div>
<!-- Carousel Item End -->
</div>
<a href="#glitchCarousel" class="carousel-control-prev" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a href="#glitchCarousel" class="carousel-control-next" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Carousel Code End -->
</div>
<!-- End Main Container -->
</body>
</html>
CSS
#selfie
{
border-radius: 20%;
padding: 30px;
}
.info
{
color: #000;
padding-top: 10px;
}
#main-art
{
}
.art-paragraph
{
padding-top: 10px;
color: #000;
margin:auto;
max-width: 50%;
}
#glitchCarousel
{
max-width: 60%;
margin: auto;
border-style: solid;
border-color: #000;
border-width: 12px;
padding: 10px;
}
最佳答案
jquery 和 popper.js 是 bootstrap 的依赖!要使组件正常工作，您必须添加 jQuery。所以请添加 jQuery!
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
关于jquery - Bootstrap4 轮播控件不活动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49948073/