时间戳

首页 > 解决方案 > 如何使用纯反应轮播为幻灯片添加间距

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

问题描述

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

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

标签： pure-react-carousel

解决方案

Pure 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 中的幻灯片默认具有固有高度。这意味着，就像图像标签一样，每张幻灯片的高度越高，每张幻灯片就越宽。就像没有设置 height 属性的图像的高度一样，图像在浏览器中变得越宽越高。

该<Slide />组件有一个带有 class 的子 div .carousel__inner-slide。为了让您的轮播具有单元格间距的“错觉”，.carousel__inner-slide请在您的项目中创建一个 css 规则。或者通过prop传递<Slide />组件一个类名。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

推荐阅读