Question

我已经设置了一个光滑的滑块，可以对每个section标签下的图像做出反应。当我随机单击箭头图标时，它正隐藏在滑块中。

请查看以下代码：

 let settings = {
    slidesToShow: 1,
    slidesToScroll: 1,
    infinite: false,
    speed: 500,
    arrows: true,
    responsive: [
      {
        settings: {
          infinite: false,
          slidesToShow: 1
        }
      }
    ]
};

return(
let imageSlider =
      array.image.map((review, i) => {
      return (
        <div
          key={`photo${i}`}
        >
          <figure
            style={{
              backgroundImage: `url(${review})`
            }}
          >
          </figure>
        </div>
      );
    });
  return (
    <div className="left-img">
      <Slider
        {...settings}
      >
        {imageSlider}
      </Slider>
    </div>
)

在这里，我循环图像并附加到imageSlider变量，从而在Slider类内使用此imageSlider。图像可以正确渲染，但是单击箭头图标时它被隐藏了。

Answer 1

您的问题陈述不是很清楚，请同时添加屏幕截图，以便我们更好地了解您的问题。

现在，尝试在全局样式表中添加以下CSS，这可能会有帮助，

.slick-arrow {
    -index: 9;
}

反应箭头图标中的光滑滑块隐藏

1 个答案: