slickjs always show arrows

Question

I'm trying to config slick.js to show arrows in any circumstance.

$('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 6,
  infinite: true,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  arrows: true,
  centerMode: false,
  focusOnSelect: true
});

The problem is when my slider hasn't enough slides do show (in my case, 6) If the slider has less than 6 slides, the arrows don't show up.

I know the plugin works like that, but for other reasons, i need to always show the arrows.

Anyone had to deal with something like that before ?

Thanks.

Answer 1

Make arrows:false and show arrow by your own

$('.container').slick({
   arrows: false,
});

and attach the events to arrows.

$('.next-arrow').on('click', function(){
   $('.container').slick('slickNext');
});
$('.prev-arrow').on('click', function(){
   $('.container').slick('slickPrev');
});