时间戳

首页 > 解决方案 > 将引导程序的轮播幻灯片拆分为多个幻灯片并更改箭头的可见性

html - 将引导程序的轮播幻灯片拆分为多个幻灯片并更改箭头的可见性

问题描述

我想做一个carouselin bootstrap，它被分成187x300幻灯片，但幻灯片彼此相邻，它们之间有一点空间。

此外，我已将旋转木马的大小调整为幻灯片的大小，但唯一可见的箭头是左边的箭头，它位于幻灯片本身上。

我希望它位于左侧但在幻灯片之外（右侧相同）。

例如，我将附上一张图片。

另外（我知道我在重复自己），如果这个问题不是太重，我希望它像某种 Netflix 轮播一样来做，所以在幻灯片悬停时，图像变得有点大，而且它有一个黑色在覆盖层上覆盖文本。谢谢你。

在此处输入图像描述

代码 ：

索引.html


<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Na merge</title>

      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
      <link rel="stylesheet" href="css/test.css">


</head>

<body>

  <div class="carousel slide carousel-fade" data-ride="carousel">
    <!--Slides-->
    <div class="carousel-inner" role="listbox">
      <!--First slide-->
      <div class="carousel-item active">
        <img class="d-block w-100" src="https://via.placeholder.com/187x300"
          alt="First slide">
      </div>
      <!--/First slide-->
      <!--Second slide-->
      <div class="carousel-item">
        <img class="d-block w-100" src="https://via.placeholder.com/187x300"
          alt="Second slide">
      </div>
      <!--/Second slide-->
      <!--Third slide-->
      <div class="carousel-item">
        <img class="d-block w-100" src="https://via.placeholder.com/187x300"
          alt="Third slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://via.placeholder.com/187x300"
          alt="Third slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://via.placeholder.com/187x300"
          alt="Fourth slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://via.placeholder.com/187x300"
          alt="Fifth slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://via.placeholder.com/187x300"
          alt="Sixth slide">
      </div>
      <!--/Third slide-->
    </div>
    <!--/.Slides-->
    <!--Controls-->
    <a class="carousel-control-prev" href="#fullCarousel" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#fullCarousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
    <!--/.Controls-->
  </div>
  <!--/.Carousel Wrapper-->



  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

</html>

样式.css


.carousel-item{
    height: 300px;
    width: 187px;
}
.carousel-item img{
  height: 300px;
  width: 187px;
}

标签： htmlcssbootstrap-4

解决方案

请删除此样式：

.carousel-item{
   height: 300px;
   width: 187px;
}

然后将您的项目添加到一个项目中，如下所示：

<div class="carousel-item">
    <div class="row">
        <div class="col-sm">
            <img src"...">
        </div>
        <div class="col-sm">
            <img src="...">
        </div>
        <div class="col-sm">
            <img src="...">
        </div>
        <div class="col-sm">
            <img src="...">
        </div>
    </div>
</div>

推荐阅读