How to set the single screen display column in the layui carousel? layuiのカルーセルで単一画面表示列を設定する方法は？

Layuiのスライダーコンポーネントは、1画面の列の設定をサポートしていません。これはモバイル用のスライダーコンポーネントであり、スライダーアイテムの幅のみを設定することができます。1画面の列を実現したい場合は、他のスライダーコンポーネントを使用するか、コードを書く必要があります。以下はjQueryを使用して1画面の列を実現する簡単な例です。

ホームページのHTMLコード:

<div class="carousel">
  <ul class="carousel-list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div>

CSSコード:

.carousel {
  overflow: hidden;
  position: relative;
}
.carousel-list {
  display: flex;
  width: 100%;
  transition: transform 0.5s ease;
}
.carousel-list li {
  flex: 0 0 20%;
  padding: 10px;
}

JavaScriptのコード：

$(function() {
  var carousel = $('.carousel');
  var carouselList = carousel.find('.carousel-list');
  var carouselItemWidth = carouselList.find('li').outerWidth(true);
  var visibleItemCount = Math.floor(carousel.width() / carouselItemWidth);
  var totalItemCount = carouselList.find('li').length;
  var currentIndex = 0;
  
  carouselList.css('width', totalItemCount * carouselItemWidth);
  
  $('.carousel-prev').click(function() {
    if (currentIndex > 0) {
      currentIndex--;
      carouselList.css('transform', 'translateX(' + (-currentIndex * carouselItemWidth) + 'px)');
    }
  });
  
  $('.carousel-next').click(function() {
    if (currentIndex < totalItemCount - visibleItemCount) {
      currentIndex++;
      carouselList.css('transform', 'translateX(' + (-currentIndex * carouselItemWidth) + 'px)');
    }
  });
});

この例では、各スライドが20％の幅を占めるようにflexレイアウトを使用し、JavaScriptで表示されるスライドの数と現在のインデックスを動的に計算して、1画面に列を表示する効果を実現しています。必要に応じてCSSスタイルとJavaScriptコードを調整することができます。