Custom Bootstrap 5 carousel on mobile (multiple items, but not in one row)
P粉763662390
P粉763662390 2023-09-05 11:53:56
0
1
603
<p>I'm having trouble trying to customize the carousel layout on mobile devices. I want it to show every item of the carousel on mobile instead of just one, but after trying some CSS and JS, specifically using <code>display</code> <code>float< /code> or <code>max-witdh</code> I'm just starting to think this isn't possible or I don't know where to look/look at the wrong location/attribute. I've included two images so you can see what I'm trying to achieve. </p> <p>What I want to achieve: </p> <p>What I have: </p> <p>The example html code is very basic, I'm not including CSS as this is just for design purposes. </p> <pre class="brush:php;toolbar:false;"><div id="solutions-carousel" class="carousel slide d-block d-md-none"> <div class="carousel-inner"> <div class="carousel-item active"> <a href="#" class="img-link"><img src="./img.png" alt=""></a> <a href="#">text</a> </div> <div class="carousel-item"> <a href="#" class="img-link"><img src="./img.png" alt=""></a> <a href="#">text</a> </div> <div class="carousel-item active"> <a href="#" class="img-link"><img src="./img.png" alt=""></a> <a href="#">text</a> </div> <div class="carousel-item active"> <a href="#" class="img-link"><img src="./img.png" alt=""></a> <a href="#">text</a> </div> <div class="carousel-item active"> <a href="#" class="img-link"><img src="./img.png" alt=""></a> <a href="#">text</a> </div> <div class="carousel-indicators"> <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="2" aria-label="Slide 3"></button> <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="3" aria-label="Slide 3"></button> <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="4" aria-label="Slide 3"></button> </div></pre> <p>有什么想法吗?干杯(并对糟糕的英语表示歉意)。</p>
P粉763662390
P粉763662390

reply all(1)
P粉029057928

I think similar questions and cases have been answered before in another thread. I found some references that might be helpful to you and I'll give you some links. Another thread in stackoverflow

You can also use the following JS code:

$('.multi-item-carousel').carousel({
  interval: false
});

// for every slide in carousel, copy the next slide's item in the slide.
// Do the same for the next, next item.
$('.multi-item-carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));
  
  if (next.next().length>0) {
    next.next().children(':first-child').clone().appendTo($(this));
  } else {
    $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
  }
});

Disclaimer: These answers/code snippets are not mine. I got it from Maurice melchers' https://codepen.io/mephysto/pen/ZYVKRY

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template