slick carousel - hide controls?

Question

Are there any options to stop slick adding next & previous buttons? I can't seem to hide them via css.

<button type="button" data-role="none" class="slick-prev" aria-label="previous" style="display: inline-block;">Previous</button>

what have you done so far? please share with us – ahmednawazbutt Sep 29 '20 at 11:58 — ahmednawazbutt, Sep 29 '20 at 11:58

score 69 · Accepted Answer · edited Aug 10 '16 at 10:59

69

Add prevArrow: false and nextArrow: false to where you call your carousel. Ex)

$('.slider').slick({
    dots: false,
    prevArrow: false,
    nextArrow: false
});

I added dots: false in case you wanted to remove that too.

edited Aug 10 '16 at 10:59

Remco Beugels

answered May 03 '16 at 16:35

Edward

With lazyLoad setted to "ondemand" this solution prevents image to be displayed when the carousel is dragged. The solution that worked for me is the one repoterd by @Zoltan Ordog – Stefano Martella Aug 28 '20 at 08:50

score 22 · Answer 2 · answered Feb 13 '17 at 11:55

22

if you want to get rid of both arrows:

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

answered Feb 13 '17 at 11:55

Zoltan Ordog

score 4 · Answer 3 · answered Apr 09 '15 at 16:52

4

Do you want to hide the buttons? Then try this CSS:

.slick-prev:before,
.slick-next:before {
   display:none;
}

answered Apr 09 '15 at 16:52

atiquratik

1

thanks @aRahmanS29 - I had to find another approach and never got to try this. – v3nt Apr 21 '15 at 10:33
@danielCrabbe what approach did you use? I am having the same issue. – nihiser Feb 26 '16 at 17:59
@nihiser - can't quite remember what job this was for! Will update if i remember. – v3nt Feb 27 '16 at 18:14

score 3 · Answer 4 · answered Oct 04 '17 at 08:41

3

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

answered Oct 04 '17 at 08:41

Glen Davidson

score 1 · Answer 5 · answered Oct 24 '16 at 22:08

I had problems with hiding buttons using javascript so I try to use it with CSS

.slider button{
    display: none;
}

,but this didn't work so I use

.slider button{
    visibility: hidden;
}

It doesn't have pointer events so you will be good to go.

netgenius.co.uk · Answer 6 · 2018-02-07T16:45:28.820

1

To hide the buttons using CSS only, this worked for me:

nav.slick__arrow {
  height: 0;
  overflow: hidden;
}

I have also used:

nav.slick__arrow, ul.slick-dots {
  display: none!important;
}

edited Feb 07 '18 at 16:45

answered Feb 07 '18 at 14:26

netgenius.co.uk

score 1 · Answer 7 · edited Sep 29 '20 at 12:28

1

I faced problem to remove arrows for particular view port.

This worked for me.

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

edited Sep 29 '20 at 12:28

Donald Duck

answered Sep 29 '20 at 11:35

Sushmitha Reddy

7 Answers7