Question

按照官方的Bootstrap教程，我正在尝试运行带有三张图像的旋转木马。出于要求我更改链接的目的，但问题仍然相同。虽然箭头似乎以某种方式响应，但图像永远不会改变。我尝试使用jQuery专门调用该问题无济于事。我需要能够旋转至少三个图像才能获得成功。我一直在使用谷歌浏览器作为我的浏览器。

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;
}

Answer 1

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>

Bootstrap4 Carousel控制无效

1 个答案: