react-slick: arrows do not show up
I use react@^0.14.0 and react-slick@^0.9.1 pre and next arrow do not show up. my setting is:
var settings = {
arrows: true,
dots: true,
infinite: true,
centerMode: true,
speed: 500,
autoplay: false,
slidesToShow: 1,
slidesToScroll: 1
};
And in my index.html, i introduce the slick css and slick-theme.css
<link rel="stylesheet" type="text/css" href="static/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="static/slick/slick-theme.css" />
About this issue
- Original URL
- State: closed
- Created 9 years ago
- Reactions: 5
- Comments: 17 (2 by maintainers)
It work for me with following css changes
I had the same issue that the arrows didn’t show. It turned out that my problem was about the position of the arrows. I added a css classname to the settings object and changed the posiiton of arrows. Below is my settings object and sass code.
This a seperate scss file:
I had the same problem. It turned out to be due to the buttons using white font for the text, while I was using a white background. I fixed it using the method suggested by websilone, except changing ‘color’ instead of z-index.
wow !!! That worked for me too …@tarifrudrapur
A working fix
Step 1: Add a class to your settings object.
Step 2: Write custom css to override default styles.
I am also having the same issue with arrows. I can not move them properly.
.slick-prev { left: 3% !important; z-index: 1; } .slick-next { right: 3% !important; z-index: 1; }
Didn’t work for me
This worked for me , declaring custom arrow function like it shown in the doc,
and add them in the settings:
If you are using react material leave
style
as it is do not change it tosx
, see the complete answer here https://stackoverflow.com/questions/54548121/the-arrows-does-not-showing-in-react-slick-with-4-and-more-photos/71725052#71725052