Can I add a div with multiple images inside a Bootstrap carousel slide? If so, how do I do that?-CodePudding

I have a carousel slider on my HTML page and I'd like to make it so each slide is a div containing multiple images, something like this:

I've already tried adding this to each carousel-item div inside the carousel:

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

but it didn't quite work and I'm not sure that's the right way either. Is it even possible? How could I do that?

CodePudding user response：

It is indeed possible to add multiple images to a Bootstrap carousel.

Take a look at the following example. I'm using the most basic Bootstrap Carousel, sending a div with multiple child images. Then, to achieve the look on the example image, you would need to use a grid layout on the div.

Take a look at the following example:

<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"  data-bs-ride="carousel">
    <div >
      <div >
        <div  style="background-color: beige;">
          <div  style="height: 100vh">
            <img  src="https://cdn.pixabay.com/photo/2022/10/07/09/06/bridge-7504605__340.jpg" alt="...">
            <img  src="https://cdn.pixabay.com/photo/2022/10/15/21/23/cat-7523894__340.jpg" alt="">
            <img  src="https://cdn.pixabay.com/photo/2021/03/04/11/37/coast-6067736__340.jpg" alt="">
            <img  src="https://cdn.pixabay.com/photo/2022/10/15/06/45/danube-river-7522608__340.jpg" alt="">
          </div>
        </div>
      </div>
      <div >
        <img src="https://cdn.pixabay.com/photo/2022/09/24/16/32/bulldog-7476727__340.jpg"  alt="...">
      </div>
      <div >
        <img src="https://cdn.pixabay.com/photo/2021/03/04/11/37/coast-6067736__340.jpg"  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>

I hope this helps!

CodePudding user response：

You could use Ken Wheelers Slick slider to have better control over carousel slides responsively in Bootstrap 4.

For example in demo below we are showing...

XS (smallest mobile first screen) - 3 images slides - 3 slides to scroll - no arrows
SM (small screen) - 4 images slides - 4 slides to scroll - show arrows
MD (medium screen) - 5 images slides - 5 slides to scroll - show arrows
LG (large screen) - 6 images slides - 6 slides to scroll - show arrows
XL (extra-large screen) - 7 images slides - 7 slides to scroll - show arrows

See live example demo below...

All settings in list above are easily customisable for each bootstrap 4 breakpoint event via js options below...

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 >
  <div id="slick">

    <div >
      <img src="https://i.imgur.com/JX3Ppxe.png"  />
    </div>

    <div >
      <img src="https://i.imgur.com/JX3Ppxe.png"  />
    </div>

    <div >
      <img src="https://i.imgur.com/JX3Ppxe.png"  />
    </div>

    <div >
      <img src="https://i.imgur.com/JX3Ppxe.png"  />
    </div>

    <div >
      <img src="https://i.imgur.com/JX3Ppxe.png"  />
    </div>

    <div >
      <img src="https://i.imgur.com/JX3Ppxe.png"  />
    </div>
    
    <div >
      <img src="https://i.imgur.com/JX3Ppxe.png"  />
    </div>

    <div >
      <img src="https://i.imgur.com/JX3Ppxe.png"  />
    </div>

    <div >
      <img src="https://i.imgur.com/JX3Ppxe.png"  />
    </div>

    <div >
      <img src="https://i.imgur.com/JX3Ppxe.png"  />
    </div>

    <div >
      <img src="https://i.imgur.com/JX3Ppxe.png"  />
    </div>

    <div >
      <img src="https://i.imgur.com/JX3Ppxe.png"  />
    </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>