-1

I am trying to make the Bootstrap 5 carousel so that it shows around 3 items (cards) per slide when viewed on desktop/laptop, but then only show 1 item when on smaller devices (768px or less) but instead they are getting stacked on top of each other rather than next to each other.

I also have this code here too - JSFiddle

var carouselExampleControls = document.querySelector('#carouselExampleControls')
var carousel = new bootstrap.Carousel(carouselExampleControls, {
  interval: 0,
  wrap: false
});
@media (min-width: 768px) {
    /* show 3 items */
    .carousel-inner .active,
    .carousel-inner .active + .carousel-item,
    .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
        transition: none;
    }
    .carousel-inner .carousel-item-next,
    .carousel-inner .carousel-item-prev {
        position: relative;
        transform: translate3d(0, 0, 0);
    }
    .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -33.3333%;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    /* left or forward direction */
    .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* farthest right hidden item must be abso position for animations */
    .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    /* right or prev direction */
    .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}





@media(max-width:968px){
  .card{
    width:48% !important;
  }
}

.card input[type=radio] {
    display:none;
}
.card input[type=radio] + label:hover {
  cursor:pointer;
  border:1px solid royalblue !important;
}
/* Change the look'n'feel of labels (which are adjacent to radiobuttons). Add some margin, padding to label. */
.card input[type=radio] + label {
    font-size:14px;
    text-align:center;
    display:inline-block;
    margin:6px;
    border:1px solid var(--accordion-border2) !important;
    border-radius:4px;
    vertical-align:top;
    padding:6px;
}
/* Change background color for label next to checked radio button to make it look like highlighted button. */
.card input[type=radio]:checked + label { 
  background-image: none;
  border:2px solid royalblue !important;
  opacity:0.9;
}
@media(max-width:968px){
  .card input[type=radio] + label {
    width:48% !important;
  }
}

.carousel-control-next, .carousel-control-prev{
  background-color:black !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>




<div class="row">

<div class="col-1">
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
</div>

<div class="col-10">
    <div id="carouselExampleControls" class="carousel slide" data-interval="false" data-bs-ride="carousel">

      <div class="carousel-inner">

        <div class="carousel-item col-md-4 active">
          <div class="card">
            <input style="display:none;" type="radio" id="prod1" checked>
            <label for="prod1">
              <img src="/images/products/" style="width:82px;margin:6px;padding:6px;">
            </label>
          </div>
        </div>

        <div class="carousel-item col-md-4">
          <div class="card">
            <input style="display:none;" type="radio" id="prod2">
            <label for="prod2">
              <img src="/images/products/" style="width:82px;margin:6px;padding:6px;">
            </label>
          </div>
        </div>

        <div class="carousel-item col-md-4">
          <div class="card">
            <input style="display:none;" type="radio" id="prod3">
            <label for="prod3">
              <img src="/images/products/" style="width:82px;margin:6px;padding:6px;">
            </label>
          </div>
        </div>

        <div class="carousel-item col-md-4">
          <div class="card">
            <input style="display:none;" type="radio" id="prod4">
            <label for="prod4">
              <img src="/images/products/" style="width:82px;margin:6px;padding:6px;">
            </label>
          </div>
        </div>

        <div class="carousel-item col-md-4">
          <div class="card">
            <input style="display:none;" type="radio" id="prod5">
            <label for="prod5">
              <img src="/images/products/" style="width:82px;margin:6px;padding:6px;">
            </label>
          </div>
        </div>

      </div>
    </div>
</div>

<div class="col-1">
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

</div>
Bboi1999
  • 1
  • 1
  • 7

1 Answers1

-1

I hope this code will be helpful.

let items = document.querySelectorAll('.carousel .carousel-item')

items.forEach((el) => {
    const minPerSlide = 4
    let next = el.nextElementSibling
    for (var i=1; i<minPerSlide; i++) {
        if (!next) {
            // wrap carousel by using first child
            next = items[0]
        }
        let cloneChild = next.cloneNode(true)
        el.appendChild(cloneChild.children[0])
        next = next.nextElementSibling
    }
})
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
}

/* medium and up screens */
@media (min-width: 768px) {
    
    .carousel-inner .carousel-item-end.active,
    .carousel-inner .carousel-item-next {
      transform: translateX(25%);
    }
    
    .carousel-inner .carousel-item-start.active, 
    .carousel-inner .carousel-item-prev {
      transform: translateX(-25%);
    }
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start { 
  transform: translateX(0);
}
<div class="container text-center my-3">
    <h2 class="font-weight-light">Bootstrap Multi Slide Carousel</h2>
    <div class="row mx-auto my-auto justify-content-center">
        <div id="recipeCarousel" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner" role="listbox">
                <div class="carousel-item active">
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-img">
                                <img src="//via.placeholder.com/500x400/31f?text=1" class="img-fluid">
                            </div>
                            <div class="card-img-overlay">Slide 1</div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-img">
                                <img src="//via.placeholder.com/500x400/e66?text=2" class="img-fluid">
                            </div>
                            <div class="card-img-overlay">Slide 2</div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-img">
                                <img src="//via.placeholder.com/500x400/7d2?text=3" class="img-fluid">
                            </div>
                            <div class="card-img-overlay">Slide 3</div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-img">
                                <img src="//via.placeholder.com/500x400?text=4" class="img-fluid">
                            </div>
                            <div class="card-img-overlay">Slide 4</div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-img">
                                <img src="//via.placeholder.com/500x400/aba?text=5" class="img-fluid">
                            </div>
                            <div class="card-img-overlay">Slide 5</div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-img">
                                <img src="//via.placeholder.com/500x400/fc0?text=6" class="img-fluid">
                            </div>
                            <div class="card-img-overlay">Slide 6</div>
                        </div>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            </a>
            <a class="carousel-control-next bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
            </a>
        </div>
    </div>
    <h5 class="mt-2 fw-light">advances one slide at a time</h5>
</div>
Ninja Developer
  • 1
  • 1