<p>我在尝试自定义移动设备上的轮播布局时遇到问题。 我希望它在移动设备上显示轮播的每一项，而不是只显示一项，但在尝试使用一些 CSS 和 JS 之后，尤其是使用 <code>display</code> <code>float</code> 或<code>max-witdh</code> 我刚刚开始认为这是不可能的，或者我不知道在哪里查看/查看错误的位置/属性。 我加入了两张图片，这样你们就可以看到我想要实现的目标。</p> <p>我想要实现的目标： </p> <p>我有什么： </p> <p>示例 html 代码是非常基本的代码，我不包括 CSS，因为这只是出于设计目的。</p> <pre class="brush:php;toolbar:false;">&lt;div id=&quot;solutions-carousel&quot; class=&quot;carousel slide d-block d-md-none&quot;&gt; &lt;div class=&quot;carousel-inner&quot;&gt; &lt;div class=&quot;carousel-item active&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;img-link&quot;&gt;&lt;img src=&quot;./img.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt; &lt;a href=&quot;#&quot;&gt;text&lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;carousel-item&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;img-link&quot;&gt;&lt;img src=&quot;./img.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt; &lt;a href=&quot;#&quot;&gt;text&lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;carousel-item active&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;img-link&quot;&gt;&lt;img src=&quot;./img.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt; &lt;a href=&quot;#&quot;&gt;text&lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;carousel-item active&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;img-link&quot;&gt;&lt;img src=&quot;./img.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt; &lt;a href=&quot;#&quot;&gt;text&lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;carousel-item active&quot;&gt; &lt;a href=&quot;#&quot; class=&quot;img-link&quot;&gt;&lt;img src=&quot;./img.png&quot; alt=&quot;&quot;&gt;&lt;/a&gt; &lt;a href=&quot;#&quot;&gt;text&lt;/a&gt; &lt;/div&gt; &lt;div class=&quot;carousel-indicators&quot;&gt; &lt;button type=&quot;button&quot; data-bs-target=&quot;#solutions-carousel&quot; data-bs-slide-to=&quot;0&quot; class=&quot;active&quot; aria-current=&quot;true&quot; aria-label=&quot;Slide 1&quot;&gt;&lt;/button&gt; &lt;button type=&quot;button&quot; data-bs-target=&quot;#solutions-carousel&quot; data-bs-slide-to=&quot;1&quot; aria-label=&quot;Slide 2&quot;&gt;&lt;/button&gt; &lt;button type=&quot;button&quot; data-bs-target=&quot;#solutions-carousel&quot; data-bs-slide-to=&quot;2&quot; aria-label=&quot;Slide 3&quot;&gt;&lt;/button&gt; &lt;button type=&quot;button&quot; data-bs-target=&quot;#solutions-carousel&quot; data-bs-slide-to=&quot;3&quot; aria-label=&quot;Slide 3&quot;&gt;&lt;/button&gt; &lt;button type=&quot;button&quot; data-bs-target=&quot;#solutions-carousel&quot; data-bs-slide-to=&quot;4&quot; aria-label=&quot;Slide 3&quot;&gt;&lt;/button&gt; &lt;/div&gt;</pre> <p>有什么想法吗？干杯（并对糟糕的英语表示歉意）。</p>

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