How to set the single screen display column in the layui carousel?

2 years ago
Noah Thompson
2 minutes

Layui’s carousel component does not support setting the number of columns displayed on a single screen. It is designed for mobile devices and only allows for setting the width of the carousel items. If you want to achieve a single screen column display effect, consider using a different carousel component or writing your own code to implement it. Here is a simple example using jQuery to achieve a single screen column display.

HTML code:

<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 code:

.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 code:

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

In this example, we are using flex layout to set each carousel item to occupy 20% of the width and dynamically calculate the number of visible carousel items and the current index through JavaScript to achieve the effect of displaying a single screen column. You can adjust the CSS styles and JavaScript code according to your own needs.

bannerAds