React+Tailwind开发BookMyShow克隆时cast轮播图图片间距无法缩小

你遇到的问题是react-slick轮播库默认给每个轮播项设置了固定左右内边距，仅修改图片尺寸不会改变轮播项本身的间距，按以下方案调整即可：

方案1：仅修改当前演职员轮播的间距（推荐，不影响其他轮播组件） #

1. 给Cast组件的Slider轮播添加自定义类名，避免全局样式污染：

// Cast.component.js 中修改Slider标签
<Slider className="cast-carousel" {...settings}>
  { CastImages.map((data) => <CastPoster {...data} />) }
</Slider>

2. 加入对应自定义CSS，可根据需求调整间距数值：

/* 全局CSS文件或当前组件样式文件中添加 */
.cast-carousel .slick-slide {
  padding: 0 6px !important; /* 控制每个轮播项左右间距，数值越小间距越小 */
}
.cast-carousel .slick-list {
  margin: 0 -6px !important; /* 抵消左右两侧轮播项的内边距，避免内容被裁剪 */
}

方案2：调整轮播项组件内边距 #

你也可以直接给CastPoster的外层容器加左右内边距控制间距，搭配tailwind直接修改即可：

// movieCast.component.js 中修改外层div样式
<div className="px-2 flex flex-col items-center">
  <img className="rounded-full w-32 h-32 mb-2" src={props.src} alt={props.name} />
  <div className="text-center">
    <h3 className="text-sm font-medium">{props.name}</h3>
    <p className="text-xs text-gray-500">{props.role}</p>
  </div>
</div>

注意：原代码中img标签的atl属性拼写错误，建议修正为alt。

内容的提问来源于stack exchange，提问作者Aravinth Vimal