Question

我在网页上添加了两个轮播滑块。主标题轮播转盘滑块正常工作，但第二个出现问题
一种。网站加载时不会自动滑动。（但有时会滑动）
b。单击时，指示器和控件没有响应。

我已经检查了以下内容
一种。 ID，数据定位和href
b。 z-index
C。图书馆

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script src="https://unpkg.com/popper.js@1.15.0/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

**在此处检查CodePen：** https://codepen.io/abdulrehman-siddiqi/pen/XWrMgqq
**工作地点：** http://mirchisamosa.tk

Answer 1

这是一个基本的引导轮播，已更改为每张幻灯片包含4张图像...您将看到我做了一些细微的更改以使多个图像都能正常工作...

下面的工作代码段：

.work-item.active {
  display: flex;
  margin-left: 0;
}

.carousel-item {
  height: 150px;
}

.work-img {
  display: inline-block;
  max-width: 24% !important;
  padding: 10px 10px;
}

.divContollers ul,
.divContollers a {
  border: 2px solid red;
  height: 40px;
  top: 100%;
  color: #000;
  background: black;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<div class='container-fluid'>
  <div class='row'>

    <div id="demo" class="carousel slide" data-ride="carousel">

      <!-- The slideshow -->
      <div class="carousel-inner">
        <div class="carousel-item work-item active">
          <img src="https://www.w3schools.com/bootstrap4/la.jpg" class='img-fluid' alt="Los Angeles" width="1100" height="500">
        </div>
        <div class="carousel-item work-item row ">
          <div class="work-img col-4 col-sm-4 col-md-3 col-lg-3"><img src="https://picsum.photos/id/952/536/354.jpg" class="img-fluid " alt="img5"></div>
          <div class="work-img col-4 col-sm-4 col-md-3 col-lg-3"><img src="https://picsum.photos/id/952/536/354.jpg" class="img-fluid " alt="img6"></div>
          <div class="work-img col-4 col-sm-4 col-md-3 col-lg-3"><img src="https://picsum.photos/id/952/536/354.jpg" class="img-fluid " alt="img7"></div>
          <div class="work-img col-4 col-sm-4 col-md-3 col-lg-3"><img src="https://picsum.photos/id/952/536/354.jpg" class="img-fluid " alt="img8"></div>
        </div>
        <div class="carousel-item work-item row ">
          <div class="work-img col-sm-4 col-md-3 col-lg-3"><img src="https://picsum.photos/536/354.jpg" class="img-fluid" alt="img9"></div>
          <div class="work-img col-sm-4 col-md-3 col-lg-3"><img src="https://picsum.photos/536/354.jpg" class="img-fluid" alt="img10"></div>
          <div class="work-img col-sm-4 col-md-3 col-lg-3"><img src="https://picsum.photos/536/354.jpg" class="img-fluid" alt="img11"></div>
          <div class="work-img col-sm-4 col-md-3 col-lg-3"><img src="https://picsum.photos/536/354.jpg" class="img-fluid" alt="img12"></div>
        </div>

      </div>

      <div class='divContollers'>

        <ul class="carousel-indicators">
          <li data-target="#demo" data-slide-to="0" class="active"></li>
          <li data-target="#demo" data-slide-to="1"></li>
          <li data-target="#demo" data-slide-to="2"></li>
          <!--
                    -->
        </ul>
        <!-- Left and right controls -->
        <a class="carousel-control-prev" href="#demo" data-slide="prev">
          <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#demo" data-slide="next">
          <span class="carousel-control-next-icon"></span>
        </a>
      </div>
    </div>


  </div>
</div>

轮播指标和控件未响应鼠标单击

1 个答案: