Slick: [Question] How to hide arrows if I have only one item in slider

[Shalimov]

How can I hide arrows if my slide show consists of only one item?

[R4NSS]

I have this issue too and also come across a slightly wider issue where what happens if you have two items in the list, so on desktop there is no slide function as there is nothing to slide to - the buttons need to disappear but they dont. Also, then when you move the browser size down to mobile portrait view where only 1 list item is visible at a time, the buttons should now show.

Im guessing there needs to be some sort of logic here where the buttons are hidden

list items are equal to or less than the number of slides visible

[leggomuhgreggo]

Hey please make a fiddle/pen when asking for help.

I've never seen the arrows apply when there's only one slide.

Here's a codepen illustrating them not showing when there's one slide.

[Shalimov]

I've found a problem.
Pls look at the first Example 1:
Here you can see that I use custom theme for prevArrow and nextArrow(markup inside). It works great.
But if I want to use css selector as a pointer to my custom markup it will not work:
Example 2

[leggomuhgreggo]

Ah I see. Yeah, so I guess in a perfect world the library would hide the selector-defined arrows if there's only one slide, but because they're existing elements in the markup I can see how an argument can be made for leaving them.

Luckily the fix is pretty easy; just test for slide length on init, and if it's 1 then hide the arrows.

[Shalimov]

Ok, it works, thx.

[simeydotme]

would be fixed by https://github.com/kenwheeler/slick/pull/1331 :)

[HiimF]

@leggomuhgreggo how do i test it?

[samwilliscreative]

@HiimF You need to place the init event code before you intialize the slider, and then create an if statement that will count the amount of slides on load, and then hide the arrows if necessary. The following code should work for you, or at least point you in the right direction:

// the event needs to be run before slick is initialized
$('.slider').on('init', function (event, slick, direction) {

    // check to see if there are one or less slides
    if (!($('.slider .slick-slide').length > 1)) {

        // remove arrows
        $('.slider__arrow').hide();

    }

});
$('.slider').slick({
    YOUR SETTINGS: HERE
});

[omarel1]

Just figured this out!

Add anywhere after you call swiper js

if using looped slides:

//dont show navigation arrows on one slide if using looped slides
        var swiper__slidecount = mySwiper.slides.length - 2;
        if (swiper__slidecount < 2) {
          $('.swiper-button-prev,.swiper-button-next').remove();
        }

or if not using looped slides:

//dont show navigation arrows on one slide if not using looped slides
        var swiper__slidecount = mySwiper.slides.length;
        if (swiper__slidecount < 2) {
          $('.swiper-button-prev,.swiper-button-next').remove();
        }

.swiper-button-prev and .swiper-button-next would be the class names of the arrows
mySwiper should be whatever you named your swiper object.

[iamkeir]

It might also be wise to only init the slider if there is more than 1 slide:

if ($('.slider .slick-slide').length > 1) {
  $('.slider').slick({
    YOUR SETTINGS: HERE
  });
}

[andypimlett]

@iamkeir Isn't .slick-slide added during init though, so the above condition fails always?

[iamkeir]

@andypimlett sounds likely - best to count the pre-Slicked elements instead.

[justinmueller]

Came across this when trying to see how others did this. This solution should work better though:

$('.slider').each(function() {
    var $this = $(this);
    if ($this.children().length > 1) {
        $this.slick({
            YOUR SETTINGS: HERE
        });
    }
});

[bridgetwes]

See this issue: https://github.com/kenwheeler/slick/issues/1403 -- dots are hidden automatically when only one slide if you use slick.js and not slick.min.js.

[jonasedemalm]

Just had this issue, switched to .min.js for production and dots appered on single item slides. Why is it different code in the minified version? Very confusing.

Creating your own minified version solves the problem, obviously...