2

I trying to create a carrousel component that would take 100% width & height of a parent container (it should be able to go fullscreen). I have added a custom-arrow but I can't style it.

How to achieve such a result?

Here is my code and a sandbox:

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} alt="img" />
          </div>
        );
      })}
    </StyledSlider>
  );
}

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

Any help would be greatly appreciated!

DoneDeal0
  • 5,273
  • 13
  • 55
  • 114
  • Does this answer your question? [Change the Arrow buttons in Slick slider](https://stackoverflow.com/questions/29876185/change-the-arrow-buttons-in-slick-slider) – jmargolisvt Nov 07 '20 at 16:06
  • Thanks. However, I read this thread before asking this question. I've managed to add a custom arrow, but my issue is that I can't style it. None of the solution presented in this thread work for me. – DoneDeal0 Nov 07 '20 at 17:02

1 Answers1

2

react-slick is passing in its own styles which you can spread into the style object of the <Button> (see: https://react-slick.neostack.com/docs/example/custom-arrows). You can then add or override any styles you wish.

The fix below uses the code from your Code Sandbox (working fork here: 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 />
};
Ed Lucas
  • 5,955
  • 4
  • 30
  • 42
  • Hi, thanks! I eventually used styled components' createGlobalStyle to overide react Slick style. – DoneDeal0 Nov 09 '20 at 09:37
  • How do I completely disable the arrows? I don't want the arrows there - I tried `display: none !important` and everything for the classes there. It's not working somehow. Some important styles are inline in this library :-/ @Ed – Akhila Jan 09 '21 at 11:32
  • @Akhila Have you tried the Slick settings property `arrows: false`? – Ed Lucas Jan 09 '21 at 19:42
  • Yes I did! It didn't disappear. – Akhila Jan 10 '21 at 14:09
  • You might try searching on `[slick.js] hide arrows`. If you don't find an answer, I'd recommend adding a new question to SO and including your Slick settings and slideshow markup so that people can address your problem. – Ed Lucas Jan 10 '21 at 15:31