Slick: Use custom arrows for navigation

[hajindersingh645]

Hi,

I don't want to use the in-built arrows generated by slick plugin. I want to use the custom arrows.
Kindly let me know how I can do that via an example.

Thanks

[raphaelparent]

If you're comfortable with css, you can look up the slick css file and modify their appearance in another css file.

[hajindersingh645]

@raphaelpweb Actually I don't want the in built arrows to appear, instead I need a code with which the arrows/navigation present in some other container [DIV element] will become the navigation for the slider.

Thanks

[matthewlyle]

You can use "arrows: false" to turn the arrows off and the slickNext/slickPrev methods to move the slider. See: http://codepen.io/anon/pen/KwMZao

[maxence33]

You can use "arrows: false" to turn the arrows off and the slickNext/slickPrev methods to move the slider. See: http://codepen.io/anon/pen/KwMZao

This seems not to work any longer on Slick 1.6.0. I will search for a different solution

[jljohnstone]

@maxence33 The syntax has changed but this feature still works. See http://codepen.io/anon/pen/qNbWwK

[maxence33]

Many thanks @jljohnstone. Works perfectly.

[jcicero518]

I have a client who wants the arrows to appear aside the "dot" navigation, so I ended up setting prevArrow / nextArrow to two DIVs inside

but this ends up causing the dot pagination to skip a page of results. Almost like it's applying an event listener to my custom DIVs as well. Anyone run into something like this?

[saturday1]

@jcicero518 Did you find a solution? I am trying to make the same solution. But it seems that slick script runs on the <li>-element, which mess up the order of the pagination when I put the arrows inside the same <ul>.