我可以在 Bootstrap 轮播幻灯片中添加包含多个图像的 div 吗？如果是这样，我该怎么做？

Question

我的 HTML 页面上有一个轮播滑块，我想将其制作为每张幻灯片都是一个包含多个图像的 div，如下所示：

我已经尝试将其添加到轮播内的每个

carousel-item

div 中：

<div class="carousel-item active">
    <div class="d-block h-100">
        <img src="images/mario_strikers.jpg">
        <img src="images/mario_strikers.jpg">
        <img src="images/mario_strikers.jpg">
        <img src="images/mario_strikers.jpg">
        <img src="images/mario_strikers.jpg">
    </div>
</div>

但它不太有效，我也不确定这是否是正确的方法。有可能吗？我怎么能这么做呢？

Answer 1

确实可以将多个图像添加到 Bootstrap 轮播中。

看下面的例子。我正在使用最基本的 Bootstrap Carousel，发送带有多个子图像的 div。然后，为了实现示例图像的外观，您需要在 div 上使用网格布局。

看下面的例子：

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Carousel</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>

<body>
  <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <div class="container-fluid" style="background-color: beige;">
          <div class="row align-items-center" style="height: 100vh">
            <img class="col-sm-3" src="https://cdn.pixabay.com/photo/2022/10/07/09/06/bridge-7504605__340.jpg" alt="...">
            <img class="col-sm-3" src="https://cdn.pixabay.com/photo/2022/10/15/21/23/cat-7523894__340.jpg" alt="">
            <img class="col-sm-3" src="https://cdn.pixabay.com/photo/2021/03/04/11/37/coast-6067736__340.jpg" alt="">
            <img class="col-sm-3" src="https://cdn.pixabay.com/photo/2022/10/15/06/45/danube-river-7522608__340.jpg" alt="">
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <img src="https://cdn.pixabay.com/photo/2022/09/24/16/32/bulldog-7476727__340.jpg" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="https://cdn.pixabay.com/photo/2021/03/04/11/37/coast-6067736__340.jpg" class="d-block w-100" alt="...">
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>

</html>

我希望这有帮助！

Answer 2

您可以使用 Ken Wheelers Slick 滑块在 Bootstrap 4 中更好地控制轮播幻灯片。

例如在下面的演示中我们展示...

XS（最小的移动设备第一屏幕）- 3 张图像幻灯片 - 3 张滚动幻灯片 - 无箭头
SM（小屏幕）- 4 张图像幻灯片 - 4 张滚动幻灯片 - 显示箭头
MD（中屏幕）- 5 张图像幻灯片 - 5 张滚动幻灯片 - 显示箭头
LG（大屏幕）- 6 张图像幻灯片 - 6 张滚动幻灯片 - 显示箭头
XL（超大屏幕）- 7 张图像幻灯片 - 7 张滚动幻灯片 - 显示箭头

请参阅下面的现场示例演示...

上面列表中的所有设置都可以轻松地为每个引导程序进行自定义通过下面的 js 选项进行 4 个断点事件...

var breakpoint = {
  // Small screen / phone
  sm: 576,
  // Medium screen / tablet
  md: 768,
  // Large screen / desktop
  lg: 992,
  // Extra large screen / wide desktop
  xl: 1200
};

// slick slider
$('#slick').slick({
  autoplay: true,
  autoplaySpeed: 2000,
  pauseOnFocus: false,
  draggable: true,
  infinite: true,
  dots: false,
  arrows: false,
  speed: 1000,
  mobileFirst: true,
  slidesToShow: 3,
  slidesToScroll: 3,
  responsive: [{
      breakpoint: breakpoint.sm,
      settings: {
        slidesToShow: 4,
        slidesToScroll: 4,
        arrows: true
      }
    },
    {
      breakpoint: breakpoint.md,
      settings: {
        slidesToShow: 5,
        slidesToScroll: 5,
        arrows: true
      }
    },
    {
      breakpoint: breakpoint.lg,
      settings: {
        slidesToShow: 6,
        slidesToScroll: 6,
        arrows: true
      }
    },
    {
      breakpoint: breakpoint.xl,
      settings: {
        slidesToShow: 7,
        slidesToScroll: 7,
        arrows: true
      }
    }
  ]
});

#slick {
  display: none;
}

#slick.slick-initialized {
  display: block;
}

#slick .slick-list {
  margin-left: -15px;
  margin-right: -15px;
}

#slick .slick-slide {
  padding-right: 15px;
  padding-left: 15px;
}

#slick .slick-slide:focus {
  outline: none;
  cursor: grab;
}

#slick .slick-arrow {
  position: absolute;
  width: 15px;
  height: 49px;
  top: 50%;
  background-color: transparent;
  border: none;
  -webkit-appearance: none;
  padding: 0;
  z-index: 100;
  transform: translateY(-50%);
  overflow: hidden;
  text-indent: 1000px;
}

#slick .slick-arrow:focus {
  outline: none;
}

#slick .slick-arrow:hover {
  cursor: pointer;
}

#slick .slick-prev {
  left: -30px;
  background-image: url('https://i.imgur.com/ao7qeXi.png');
}

#slick .slick-next {
  right: -30px;
  background-image: url('https://i.imgur.com/AhkEkP6.png');
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- Slick CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" rel="stylesheet" />

<div class="container mt-3">
  <div id="slick">

    <div class="slide">
      <img src="https://i.imgur.com/JX3Ppxe.png" class="w-100 img-fluid" />
    </div>

    <div class="slide">
      <img src="https://i.imgur.com/JX3Ppxe.png" class="w-100 img-fluid" />
    </div>

    <div class="slide">
      <img src="https://i.imgur.com/JX3Ppxe.png" class="w-100 img-fluid" />
    </div>

    <div class="slide">
      <img src="https://i.imgur.com/JX3Ppxe.png" class="w-100 img-fluid" />
    </div>

    <div class="slide">
      <img src="https://i.imgur.com/JX3Ppxe.png" class="w-100 img-fluid" />
    </div>

    <div class="slide">
      <img src="https://i.imgur.com/JX3Ppxe.png" class="w-100 img-fluid" />
    </div>
    
    <div class="slide">
      <img src="https://i.imgur.com/JX3Ppxe.png" class="w-100 img-fluid" />
    </div>

    <div class="slide">
      <img src="https://i.imgur.com/JX3Ppxe.png" class="w-100 img-fluid" />
    </div>

    <div class="slide">
      <img src="https://i.imgur.com/JX3Ppxe.png" class="w-100 img-fluid" />
    </div>

    <div class="slide">
      <img src="https://i.imgur.com/JX3Ppxe.png" class="w-100 img-fluid" />
    </div>

    <div class="slide">
      <img src="https://i.imgur.com/JX3Ppxe.png" class="w-100 img-fluid" />
    </div>

    <div class="slide">
      <img src="https://i.imgur.com/JX3Ppxe.png" class="w-100 img-fluid" />
    </div>

  </div>
</div>

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<!-- Slick jQuery min -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

Answer 3

0
投票

joshmoto 的答案是最好的，效果很好

我可以在 Bootstrap 轮播幻灯片中添加包含多个图像的 div 吗？如果是这样，我该怎么做？

问题描述投票：0回答：3

3个回答

最新问题

我可以在 Bootstrap 轮播幻灯片中添加包含多个图像的 div 吗？如果是这样，我该怎么做？

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3