如何使用纯反应轮播为幻灯片添加间距

Question

我不确定如何在纯反应轮播中的幻灯片之间添加“间距”。

有没有简单的选择如何在幻灯片之间添加间隙？我尝试了几种方法。当我一一滑动时，我需要正确的填充。使用边距时，应用于幻灯片或内部元素时，滑块会损坏，将最后一张幻灯片推到新行块上。

Answer 1

纯 React Carousel 组件的行为就像一套 HTML 标签。Pure React Carousel 组件套件的一个很好的类比是 HTML 中的 Table 标签：table、thead、tbody、tr、th、tr、tfoot、colgroup 等。table 标签是简单的，仅使用默认样式。您必须对它们应用 CSS 才能自定义您的轮播。

Pure React Carousel 默认情况下是响应式的。这意味着，除非父容器使用 CSS 限制 Pure React Carousel 的宽度，否则它将拉伸到其父容器的整个宽度。

Pure React Carousel 中的幻灯片默认具有固有高度。这意味着，就像图像标签一样，每张幻灯片的宽度越大，每张幻灯片的高度就越高。就像没有设置高度属性的图像的高度越高，图像在浏览器中变得越宽。

该<Slide />组件有一个带有 class 的子 div .carousel__inner-slide。为了给你的轮播带来单元格之间间距的“错觉”，请.carousel__inner-slide在你的项目中创建一个 CSS 规则。或者<Slide />通过 prop 向组件传递一个类名innerClassName。

例子：

.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