如何设计 React Slick carrousel 的箭头样式？

Posted 2023-05-07

【中文标题】如何设计 React Slick carrousel 的箭头样式？

【英文标题】：How to style React Slick carrousel's arrows?

【发布时间】：2021-02-20 01:45:06

【问题描述】：

我试图创建一个轮播组件，该组件将占用父容器的 100% 宽度和高度（它应该能够全屏显示）。我添加了一个自定义箭头，但我无法设置它的样式。

如何达到这样的效果？

这是我的代码和沙箱：

const ArrowLeft = (props) => (
  <button style=background:"red", border: 0 ...props className='prev'>
    back
  </button>
);

const settings = 
  dots: true,
  infinite: true,
  speed: 1000,
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  lazyLoad: true,
  centerMode: true,
  adaptiveHeight: true,
  fade: true,
  arrows: true,
  prevArrow: <ArrowLeft />,
  autoplaySpeed: 5000,
  className: "slides"
;

const images = [
  "https://static.toiimg.com/photo/72975551.cms",
  "https://www.gettyimages.fr/gi-resources/images/500px/983794168.jpg",
  "https://www.freedigitalphotos.net/images/img/homepage/394230.jpg"
];

const StyledSlider = styled(Slider)``;

const Image = styled.div`
  background-size: cover;
  background: $(props) => `url($props.src) no-repeat center`;
  width: 100%;
  height: 500px; // how to add an auto 100% width?
`;


export default function App() 
  return (
    <StyledSlider ...settings>
      images.map((image, i) => 
        return (
          <div key=i>
            <Image src=image  />
          </div>
        );
      )
    </StyledSlider>
  );

https://codesandbox.io/s/cranky-noether-1hdhr?file=/src/App.js

任何帮助将不胜感激！

【问题讨论】：

这能回答你的问题吗？ Change the Arrow buttons in Slick slider

谢谢。但是，我在问这个问题之前阅读了这个帖子。我设法添加了一个自定义箭头，但我的问题是我无法设置它的样式。此线程中提供的解决方案都不适合我。

【参考方案1】：

react-slick 传入自己的样式，您可以将其传播到 <Button> 的样式对象中（参见：https://react-slick.neostack.com/docs/example/custom-arrows）。然后，您可以添加或覆盖您希望的任何样式。

以下修复使用代码沙箱中的代码（此处的工作分支：https://codesandbox.io/s/lucid-roentgen-bie3j?file=/src/App.js）。

const Arrow = ( className, style, onClick ) => (
  <Button style=...style, left: 0, backgroundColor: 'red' onClick=onClick className=className>
    <div>back</div>
  </Button>
);

const settings = 
  ...
  prevArrow: <Arrow />
;

【讨论】：

您好，谢谢！我最终使用样式化组件的 createGlobalStyle 来覆盖 react Slick 样式。

如何完全禁用箭头？我不想要那里的箭头-我尝试了display: none !important 以及那里的所有课程。它不工作。这个库中内联了一些重要的样式：-/ @Ed

@Akhila 您是否尝试过 Slick 设置属性arrows: false？

是的，我做到了！它并没有消失。

您可以尝试在[slick.js] hide arrows 上搜索。如果您没有找到答案，我建议您向 SO 添加一个新问题，并包括您的 Slick 设置和幻灯片标记，以便人们解决您的问题。