Блог

Я пытаюсь использовать библиотеку react-multi-carousel для создания адаптивной карусели с элементами фиксированного размера. Я также хочу исправить интервал между элементами. Однако в react-multi-carousel расстояние между элементами зависит от количества отображаемых элементов (указанного в «responsive»). Есть ли способ сделать карусель отзывчивой, чтобы пробел между элементами был вводом, а не количеством элементов? то есть я хочу показывать элементы фиксированного размера с промежутком в 32 пикселя между ними на 1024 устройствах (16 пикселей на меньшем устройстве), и мне все равно, сколько элементов отображается.

 import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
const responsive = {
  superLargeDesktop: {
    // the naming can be any, depends on you.
    breakpoint: { max: 4000, min: 3000 },
    items: 5
  },
  desktop: {
    breakpoint: { max: 3000, min: 1024 },
    items: 3
  },
  tablet: {
    breakpoint: { max: 1024, min: 464 },
    items: 2
  },
  mobile: {
    breakpoint: { max: 464, min: 0 },
    items: 1
  }
};
<Carousel responsive={responsive}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</Carousel>;
  

Проблема с таким подходом заключается в том, что пространство между двумя элементами становится очень большим и выглядит странно. Я бы предпочел исправить пробел и настроить элементы на основе этого. Одним из обходных путей, о котором я думал, было вычисление количества элементов на основе ширины экрана при изменении размера окна. т.е

     breakpoint: { max: 4000, min: 3000 },
    items: window.innerWidth/WidthOfItemPlusMargin
  

Для этого я должен прослушивать события изменения размера окна. Есть ли способ лучше?

Создайте класс для вашего элемента

 .carouselItem{
    padding-right: 40px
}  
  

Добавьте 2 реквизита в карусель

1. Используйте itemClass для использования вашего класса
2. Добавьте partialVisible={false} , чтобы карусель исправляла себя всякий раз, когда ваши элементы удаляются из поля зрения

 <Carousel itemClass={styles.carouselItem} partialVisible={false}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</Carousel>