Как мне добавить интервал к моим слайдам с чистой каруселью реакции

Question

Я не уверен, как добавить «промежуток» между моими слайдами в чистой карусели реакции.

Есть ли простой способ как добавить промежутки между слайдами? Я пробовал несколько подходов. Мне нужно правильное заполнение при скольжении по одному. При использовании поля, примененного к слайду или внутреннему элементу, слайдер ломается, нажимая последний слайд на новом блоке строки.

Answer 1

Это сработало для меня:

.carousel__inner-slide {
  margin-right: 20px;
}

Answer 2

Компоненты Pure React Carousel ведут себя как набор HTML тегов. Хорошей аналогией для набора компонентов Pure React Carousel являются теги Table в HTML: table, thead, tbody, tr, th, tr, tfoot, colgroup и др. c. Теги таблиц являются простыми и используют только стили по умолчанию. Вы должны применить css к ним, чтобы настроить вашу карусель.

Pure React Carousel реагирует по умолчанию. Это означает, что он будет растягиваться на всю ширину родительского контейнера, если родительский контейнер не использует CSS для ограничения ширины карусели Pure React.

Слайды в карусели Pure React имеют внутреннюю высоту c дефолт. То есть, как и тег изображения, высота каждого слайда становится выше, чем шире становится каждый слайд. Так же, как высота изображения без установленного атрибута высоты становится выше, чем шире изображение в браузере.

Компонент <Slide /> имеет дочерний элемент div с классом .carousel__inner-slide. Чтобы придать вашей карусели «иллюзию» расстояния между ячейками, создайте правило css для .carousel__inner-slide в вашем проекте. Чтобы или передать компоненту <Slide /> имя класса через innerClassName prop.

Пример:

.carousel__inner-slide {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  left: 10px;
  top: 10px;
  background-color: burlywood;
}

Просмотреть демонстрацию: https://codesandbox.io/s/withered-wood-4bx36?fontsize=14&hidenavigation=1&theme=dark