Menu
We are using React-Slick for the Carousel effect in our application. The content in the slider is dynamic and the length of the Carousel items can be between 4 to 20.
The problem is that even when the width of all the content is less than the width of the slider track, the left-right arrows work.
What is the solution/workaround to hide or disable these arrows in such case?
336
CodePen Embed - slick-arrows. $(function(){ $("#slider"). slick({ speed: 1000, dots: true, prevArrow: '<button class="slide-arrow prev-arrow"></button>', nextArrow: '<button class="slide-arrow next-arrow"></button>' }); });
You can use "appendDots: $(Element)" in the Slick settings. It will append the dots to that element. You can place that element at any location using normal CSS. If you want it over the slide then you can use absolute or relative positioning on the element.
Please take a look at their docs. They have an option disable it.
https://github.com/akiran/react-slick
<ReactSlick arrows={false}>...</ReactSlick>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
