📌  相关文章
📜  反应引导轮播不工作 - CSS(1)

📅  最后修改于: 2023-12-03 15:07:24.313000             🧑  作者: Mango

反应引导轮播不工作 - CSS

问题描述

我正在为我的网站添加一个反应引导轮播，但它似乎不起作用。我按照教程上的步骤做了，但图片不会自动滚动和响应点击事件。这是我的代码：

<div id="my-carousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#my-carousel" data-slide-to="0" class="active"></li>
    <li data-target="#my-carousel" data-slide-to="1"></li>
    <li data-target="#my-carousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="img/slider1.jpg" alt="Slider 1">
      <div class="carousel-caption">
        <h3>Slider 1</h3>
        <p>Some descriptive text for slider 1.</p>
      </div>
    </div>
    <div class="item">
      <img src="img/slider2.jpg" alt="Slider 2">
      <div class="carousel-caption">
        <h3>Slider 2</h3>
        <p>Some descriptive text for slider 2.</p>
      </div>
    </div>
    <div class="item">
      <img src="img/slider3.jpg" alt="Slider 3">
      <div class="carousel-caption">
        <h3>Slider 3</h3>
        <p>Some descriptive text for slider 3.</p>
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#my-carousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#my-carousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>
解决方案

首先，确保您已经加载了必要的CSS和JavaScript文件。该轮播需要Bootstrap CSS和JavaScript文件以及jQuery文件。您的代码应该像这样：

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
  <!-- Your content here -->
  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- Bootstrap JS -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

如果您已经添加了这些文件，但轮播还是不起作用，请确保以下几点：

  1. 确保您已经为轮播添加了"data-ride"属性。这将触发轮播的自动滚动。您的代码应该像这样：
<div id="my-carousel" class="carousel slide" data-ride="carousel">
  1. 确保您的指标（indicators）标签中的"data-target"属性与轮播的"data-ride"属性相同。您的代码应该像这样：
<ol class="carousel-indicators">
  <li data-target="#my-carousel" data-slide-to="0" class="active"></li>
  <li data-target="#my-carousel" data-slide-to="1"></li>
  <li data-target="#my-carousel" data-slide-to="2"></li>
</ol>
  1. 确保您的轮播项（carousel item）中至少有一个为活动状态（active）。这将是页面加载时默认显示的项目。您的代码应该像这样：
<div class="item active">
  <!-- Your content here -->
</div>

如果您仍然遇到问题，请确保没有其他JavaScript代码与此轮播产生冲突。您可以检查浏览器的控制台输出，找到任何错误信息。

结论

现在，您的反应引导轮播应该可以正常工作了！如果您按照上述步骤进行操作，但仍遇到问题，请在评论中留言，我们将尽力帮助您解决问题。