Benutzerdefiniertes Bootstrap 5-Karussell auf Mobilgeräten (mehrere Elemente, aber nicht in einer Reihe)
P粉763662390
P粉763662390 2023-09-05 11:53:56
0
1
573
<p>Ich habe Probleme beim Anpassen des Karussell-Layouts auf Mobilgeräten. Ich möchte, dass jedes Element des Karussells angezeigt wird, anstatt nur eines, aber nachdem ich etwas CSS und JS ausprobiert habe, insbesondere mit <code>display</code> max-witdh</code> Ich fange gerade an zu denken, dass das nicht möglich ist, oder ich weiß nicht, wo ich nach der falschen Stelle/dem falschen Attribut suchen soll. Ich habe zwei Bilder beigefügt, damit Sie sehen können, was ich erreichen möchte. </p> <p>Was ich erreichen möchte: </p> <p>Was ich habe: </p> <p>Der Beispiel-HTML-Code ist sehr einfach, ich füge CSS nicht hinzu, da dies nur Designzwecken dient. </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" <a href="#">text</a> </div> <div class="carousel-item"> <a href="#" class="img-link"><img src="./img.png" <a href="#">text</a> </div> <div class="carousel-item active"> <a href="#" class="img-link"><img src="./img.png" <a href="#">text</a> </div> <div class="carousel-item active"> <a href="#" class="img-link"><img src="./img.png" <a href="#">text</a> </div> <div class="carousel-item active"> <a href="#" class="img-link"><img src="./img.png" <a href="#">text</a> </div> <div class="carousel-indicators"> <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="0" class="aktiv" aria-current="true" aria-label="Folie 1"></button> <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="1" aria-label="Folie 2"></button> <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="2" aria-label="Folie 3"></button> <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="3" aria-label="Folie 3"></button> <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="4" aria-label="Folie 3"></button> </div></pre> <p>有什么想法吗?干杯(并对糟糕的英语表示歉意).</p>
P粉763662390
P粉763662390

Antworte allen(1)
P粉029057928

我认为类似的问题和案例之前已经在另一个线程中得到了回答。我找到了一些可能对您有帮助的参考资料,我会给您一些链接。 stackoverflow 中的另一个线程

您还可以使用以下 JS 代码:

$('.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));
  }
});

免责声明:这些答案/代码片段不是我的。我从 Maurice melchers 的 https://codepen.io/mephysto/pen/ZYVKRY 得到它

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage