pure-react-carousel - 如何使用纯 react 旋转木马为我的幻灯片添加间距

Question

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

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

Answer 1

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

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

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

<Slide />组件有一个类为 .carousel__inner-slide 的子 div .为了给你的旋转木马单元格之间的间距“错觉”，为 .carousel__inner-slide 创建一个 css 规则。在你的项目中。那或通过 <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