slickjs always show arrows

user_1504455 0
Viewed 7008

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.

slick.js slider jquery javascript
5 Answers

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

Hide it by CSS, works for me :

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