search

kenwheeler / slick

the last carousel you'll ever need
kenwheeler.github.io/slick
MIT License
28.32k stars 5.88k forks source link

Slick-dots not visible in safari and iphone #3697

Open mithunmaddur opened 5 years ago

mithunmaddur commented 5 years ago

Its working in chrome but iphone and safari slick-dots are not visible . If I remove slick-dots from safari it display like 1 2 3 but no styles effected.

slick_carousel

import 'slick-carousel/slick/slick-theme.css'; import 'slick-carousel/slick/slick.css';

<Slider draggable={true} arrows={false} dots={true} slidesToScroll={slideToShow} infinite={false} slidesToShow={slideToShow} ref={slider => (this.slider = slider)}

josbroers commented 5 years ago

I'm currently having the same kind of issue as you. Only I can't see the dots on any screen I use. When in inspection mode I can see they are there, but you can't change the styles to make them visible.

tisu19021997 commented 5 years ago

I'm having the same problem.

leko91 commented 5 years ago

In case someone stumbles upon this, I solved it by just giving background-color: #fff to the button.

josebrownie commented 4 years ago

Hi,

There is any solution for this? I've the same issue only on iOS devices

Thanks

DC-Martin commented 3 years ago

As @leko91 said, giving it a background color worked for me... if you have a different background color on the slides, then add that same color in rgba format and give it an opacity of 0.01 - that way the background on the dots wont be seen during the transition. For example: .slick-dots li { background-color: rgba(242, 243, 244, 0.01); }