Slick: Inline-Style on arrows -> "display: block" (hiding arrows)

[Jugibur]

I want to hide the left arrow on the first slide,
and the right arrow on the last slide.

Why do you use an inline-style "display: block" on each arrow?

Overwriting with external CSS is possible, yes, but you need a high specification with "!important".
Perhaps you can set "display: block" in the external slider-css?

[boRk3D]

+1
is this working as intended?

[simeydotme]

yes, it's been this way a long time. I was tempted to change it in a recent patch, but didn't do it in the end.

https://github.com/kenwheeler/slick/blob/master/slick/slick.js#L1288-L1289
Feel free to make a patch with loaded/unloaded arrow & dot classes :)

[leggomuhgreggo]

Looks like this got into the master at some point. Closing! Thanks!

[TheNaderio]

Is this really done? I still got this error in 2018. The slick-arrow is automatically given display:block as an inline statement.
And I really dont like !importantin my Styles ;)

This:

mySlider = $('.my-slider').slick({
        vertical: true,
        swipe: false,
        infinite: false,
        slidesToShow: 4,
        slidesToScroll: 1,
        speed: 250,
        prevArrow: '<div class="slick-prev-wrap"><button type="button" class="slick-prev"><i class="far fa-chevron-up"></i></button></div>',
        nextArrow: '<div class="slick-next-wrap"><button type="button" class="slick-next"><i class="far fa-chevron-down"></i></button></div>'
    });

Generates this:

<div class="slick-prev-wrap slick-arrow slick-disabled" aria-disabled="true" style="display: block;">
    <button type="button" class="slick-prev"><i class="far fa-chevron-up"></i></button>
</div>

And as if this isn't weird enough - the next-arrow got display: flex

<div class="slick-next-wrap slick-arrow" style="display: flex;" aria-disabled="false">
    <button type="button" class="slick-next"><i class="far fa-chevron-down"></i></button>
</div>

[VincentCharpentier]

Same here,

I'm working with computed slides; In one of my scenarios 5 slides are displayed, then filtered with slick filters and I end up having only 1 slide with slidesToShow: 4, no arrow needed.

<div class="arrow arrow-right carousel_ready slick-arrow slick-hidden" style="display: block;" aria-disabled="true" tabindex="-1"></div>

.slick-hidden + display:block should not happen

note: display:block after a window resize

[TheNaderio]

This should be reopened.
Feb. 2019 - and the issue is still present.

No weird magic in my initialisation code:

$('.upcoming-events--slick-wrap').slick({
    mobileFirst: 1,
    infinite: false,
    slidesToShow: 1,
    prevArrow: "<button type='button' class='upcoming-events--slick-prev slick-arrow'><i class='fas fa-angle-left'></i></button>",
    nextArrow: "<button type='button' class='upcoming-events--slick-next slick-arrow'><i class='fas fa-angle-right'></i></button>",
    responsive: [
        {
            breakpoint: 768,
            settings: {
                slidesToShow: 2
            }
        },
        {
            breakpoint: 992,
            settings: {
                slidesToShow: 3
            }
        },
        {
            breakpoint: 1200,
            settings: {
                slidesToShow: 4
            }
        }
    ]
});

Generates this - with an inline style display: block;...

<div class="slick-prev-wrap slick-arrow slick-disabled" aria-disabled="true" style="display: block;">
     <button type="button" class="slick-prev"><i class="far fa-chevron-up"></i></button>
</div>

[teetotum]

This error is still present. And it's so weird. I perused the code in master and did find nothing that explains it.
Is there any third party lib used in the slider that might cause it? jQuery maybe?