Html 分割引导'；在相邻的多个幻灯片中旋转幻灯片，并更改箭头的可见性_Html_Css_Bootstrap 4

Html 分割引导'；在相邻的多个幻灯片中旋转幻灯片，并更改箭头的可见性

html css bootstrap-4

Html 分割引导'；在相邻的多个幻灯片中旋转幻灯片，并更改箭头的可见性,html,css,bootstrap-4,Html,Css,Bootstrap 4,我想在bootstrap中做一个carousel，它被分割成187x300幻灯片，但是幻灯片之间要保持某种相邻关系，并留出一点空间此外，我已将旋转木马调整为幻灯片的大小，但唯一可见的箭头是左侧的箭头，它位于幻灯片上我希望它在它的外面，就像在左边，但是在幻灯片的外面（右边也是一样）例如，我将附加一个图像另外（我知道我在重复我自己），如果这个问题不太重，我希望它像Netflix旋转木马一样，在幻灯片悬停时，图像会变大一点，上面有一个黑色的覆盖层，覆盖层上有文本。多谢各位代码： index

我想在bootstrap中做一个

carousel

，它被分割成

187x300

幻灯片，但是幻灯片之间要保持某种相邻关系，并留出一点空间

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

我希望它在它的外面，就像在左边，但是在幻灯片的外面（右边也是一样）

例如，我将附加一个图像

另外（我知道我在重复我自己），如果这个问题不太重，我希望它像Netflix旋转木马一样，在幻灯片悬停时，图像会变大一点，上面有一个黑色的覆盖层，覆盖层上有文本。多谢各位

代码：

index.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>

请删除此样式：

.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>

请共享或剪断您的代码。@为了更好地理解，请将您的html代码与相应的css共享。好的，但它只是一个虚拟代码，所以不太像一个code@AminKarimi我现在有一段代码如果你想一次滚动一个项目，引导转盘没有选项。您需要使用不同的插件。

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