CODEWITHSUNDEEP
javascriptjquerysliderslick.js
victorkurauchi
victorkurauchi

Reputation: 1409

slickjs always show arrows

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.

Upvotes: 6

Views: 9120

Answers (5)

omegastripes
omegastripes

Reputation: 12612

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

Upvotes: 0

Mohit Tilwani
Mohit Tilwani

Reputation: 2776

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

Upvotes: 8

TomanDesign
TomanDesign

Reputation: 1

Hide it by CSS, works for me :

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

Upvotes: -2

Artem P
Artem P

Reputation: 5333

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

Upvotes: 0

Yoan
Yoan

Reputation: 2197

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.

Upvotes: -1

Related Questions