Benutzerdefiniertes Bootstrap 5-Karussell auf Mobilgeräten (mehrere Elemente, aber nicht in einer Reihe)
P粉763662390
2023-09-05 11:53:56
<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>
我认为类似的问题和案例之前已经在另一个线程中得到了回答。我找到了一些可能对您有帮助的参考资料,我会给您一些链接。 stackoverflow 中的另一个线程
您还可以使用以下 JS 代码:
免责声明:这些答案/代码片段不是我的。我从 Maurice melchers 的 https://codepen.io/mephysto/pen/ZYVKRY 得到它