Question

导航栏正在运行，但轮播无法正常工作。以多种方式进行了尝试，但是图像滑块不可见。 Bootstrap也已链接。阅读Bootstrap Carousel的文档，但没有帮助。帮帮我。

我的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Suburban Coderspoint</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
    <link href="style.css" rel="stylesheet">
</head>
<body>

<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container fluid">
    <a class="navbar-brand" href="#"><img src="img/SC_167_54.png"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse"
    data-target="#navbarResponsive">
        <span class="navbar-toggler-icon" ></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Tutorials</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Team</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Connect</a>
            </li>
        </ul>
    </div>
</div>

<!--- Image Slider -->
<div id="slides" class="carousel slide" data-ride="carousel">
    <ul class="carousel-indicators">
        <li data target="#carousel" data-slide-to="0" class="active"></li>
        <li data target="#carousel" data-slide-to="1" ></li>
        <li data target="#carousel" data-slide-to="2" ></li>
    </ul>
    <div class="carousel-inner">
        <div class="carousel-item">
            <img src="img/background.png">
        </div>
        <div class="carousel-item">
            <img src="img/background2.png">
        </div>
        <div class="carousel-item">
            <img src="img/background3.png">
        </div>
    </div>
</div>

我的CSS代码：

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');

/*---Media Queries --*/
@media (max-width: 992px) {}
@media (max-width: 768px) {}
@media (max-width: 576px) {}

/*---Firefox Bug Fix --*/
.carousel-item {
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

/*--- Fixed Background Image --*/
figure {
  position: relative;
  width: 100%;
  height: 60%;
  margin: 0!important;
}
.fixed-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#fixed {
  background-image: url('img/mac.png');
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
}

/*--- Bootstrap Padding Fix --*/
[class*="col-"] {
    padding: 1rem;
}

The Output Screen. 您会看到任何地方都没有图像滑块

Answer 1

您需要将一个.carousel-item设置为活动状态（通过添加.active类）。您已将其添加到轮播指示器中，但未添加到实际幻灯片中。

还请确保您包括必需的Bootstrap JavaScript依赖项。

<div class="carousel-inner">
    <div class="carousel-item active">
        <img src="img/background.png">
    </div>
    <div class="carousel-item">
        <img src="img/background2.png">
    </div>
    <div class="carousel-item">
        <img src="img/background3.png">
    </div>
</div>

响应式图像滑块不起作用

1 个答案: