-
-
Notifications
You must be signed in to change notification settings - Fork 2.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
arrows do not show up #167
Comments
Are you sure the css files are not returning 404 ? |
css files are not returning 404. And the button nodes are in DOM.
I guess it is because the z-index. But i don't know how to add custom css rules to buttons of the slider component it as i am new to react. |
Have you included font files ? On Thu, Nov 5, 2015 at 8:41 PM, 十二 notifications@github.com wrote:
|
You can add a custom css classname to the slider with the className param in the settings object. |
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. |
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. var settings = {
dots: true,
infinite: true,
speed: 1000,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
lazyLoad: true,
centerMode: true,
adaptiveHeight: true,
fade: true,
arrows: true,
autoplaySpeed: 5000,
className: 'slides'
}; This a seperate scss file: .slides {
position: relative;
.slick-prev, .slick-next {
position: absolute;
top: 50%;
}
.slick-prev {
left: 5%;
}
.slick-next {
right: 5%;
}
} |
Its is a css issue. Check demos in this repo for reference |
It work for me with following css changes
|
wow !!! That worked for me too ...@tarifrudrapur |
I am also having the same issue with arrows. I can not move them properly.
Didn't work for me |
A working fixStep 1: Add a class to your settings object. const settings = {
arrows: true,
dots: true,
infinite: false,
speed: 500,
slidesToShow: 5,
nextArrow: <NextArrow />,
prevArrow: <PrevArrow />,
className: 'react__slick__slider__parent', <------ like this
} Step 2: Write custom css to override default styles. /* REACT SLICK ARROW CUSTOM CSS */
.react__slick__slider__parent {
position: relative;
}
.react__slick__slider__parent .slick-prev,
.react__slick__slider__parent .slick-next {
position: absolute;
top: 50%;
}
.react__slick__slider__parent .slick-prev {
color: black;
z-index: 1;
}
.react__slick__slider__parent .slick-next {
border-radius: 50%;
color: black;
z-index: 1;
}
.react__slick__slider__parent .slick-prev:before, .slick-next:before {
color: black;
} |
This worked for me , declaring custom arrow function like it shown in the doc, function SampleNextArrow(props) {
const { className, style, onClick } = props;
return (
<div
className={className}
style={{ ...style, display: "block", background: "red" }}
onClick={onClick}
/>
);
} function SamplePrevArrow(props) {
....
} and add them in the settings: const settings = {
....
nextArrow: <SampleNextArrow />,
prevArrow: <SamplePrevArrow />
}; If you are using react material leave |
Thanks @tarifrudrapur |
Wow , thanks . This solve worked for me @tarifrudrapur |
i do the same but i cant customer prevArrow, nextArrow was fine |
this work's for me |
Thanks Bro |
I use react@^0.14.0 and react-slick@^0.9.1
pre and next arrow do not show up.
my setting is:
And in my index.html, i introduce the slick css and slick-theme.css
The text was updated successfully, but these errors were encountered: