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.

Goodfellowship

Could you post a fiddle? – Davena

Just create your own arrows ;) On the slick setting of $('.slider-nav') set arrows: false then make use buttons/link. On the onclick handler of buttons/links, use .slickNext() and .slickPrev() – Si

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');
});

Anemoscope

Note that the slick method syntax has changed, so now $('.container').slickNext(); would need to be $('.container').slick('slickNext'); – Aglet

@Aglet Thanks for the info. Updated the answer. – Anemoscope

Answer 2

You can set slidesToShow to 0 if there is less than your default count of slides:

$(function() {
  var slides_count;
  slides_count = $('.slides .slide').length <= 5 ? 0 : 5;
  $('.slides').slick({
    slidesToShow: slides_count
  });
  if ($('.slides .slide').length <= 5) {
    return $('.slides .slick-next').addClass('slick-disabled').off('click');
  }
});

$('.slides').on('afterChange', function(slick) {
  if ($('.slides .slide').length <= 5) {
    return $(this).find('.slick-next').addClass('slick-disabled');
  }
});

Dolhenty

If slidesToShow is set to 0 it gets stuck in an infinite loop creating infinite copies of the slides (regardless of the value of infinite). – Jaquesdalcroze

@Jaquesdalcroze At the moment I wrote this answer there was no infinite loop. – Dolhenty

Answer 3

1. Set slidesToShow to 1 at init to make sure the arrows created by slick.
2. Set the desired slidesToShow right after init.
3. If slideCount greater than slidesToShow then slick creates arrows click handlers itself, otherwise create additional handlers which simply forward clicks to slide elements.

$('.product__slider-big-modal').slick({
    slidesToShow: 1,
    infinite: false,
    arrows: false,
    dots: false,
    slidesToScroll: 1,
    draggable: false,
    speed: 500,
    asNavFor: '.product__slider-mini-modal'
});
const $slickPmm = $('.product__slider-mini-modal').slick({
    slidesToShow: 1, // always show arrows
    slidesToScroll: 1,
    speed: 500,
    infinite: false,
    arrows: true,
    dots: false,
    asNavFor: '.product__slider-big-modal',
    focusOnSelect: true
});
const slickPmm = $slickPmm[0].slick;
slickPmm.options.slidesToShow = 6; // set desired number after init
if (slickPmm.slideCount <= slickPmm.options.slidesToShow) {
    // handle arrows click 
    $slickPmm.find('.slick-next.slick-arrow').on('click', () => {
        $slickPmm.find('.slick-slide.slick-current').next().click();
    });
    $slickPmm.find('.slick-prev.slick-arrow').on('click', () => {
        $slickPmm.find('.slick-slide.slick-current').prev().click();
    });
}

Lassiter

Answer 4

You just need to modified slick.js file in the or prevArrow and nextArrow(markup inside) events, check for slide length on init, and if it's 1 then hide the arrows.

Oceanography

Answer 5

Hide it by CSS, works for me :

.slick-prev.slick-arrow.slick-disabled,
.slick-next.slick-arrow.slick-disabled {
    display: none !important; 
}   

Exequatur