Slick: Have next/prev arrows inside container

[isaacalves]

Hi,

I'm trying to find a way to have the navigation arrows inside a container, for instance, when you have a full width slider and you want the arrows to be constrained to a certain width. Like it's done with the dotsClass.

Any ideas?

[leggomuhgreggo]

@isaacalves: As a matter of fact, I've been thinking about this a good bit recently, relating to other arrow enhancements in consideration.

I think it'd be convenient, but since it's a matter of design opinion, instead of having functional implications in the script like dotsClass, I'm hesitant about adding it as an option. I think the rule of thumb is that styles should be as un-opinionated as possible to reduce complexity, especially where script-css dependencies is concerned. On the other hand this is such a common use case...

To accomplish what you want, you just need to modify the styles a bit:

.slick-prev{ left: 0 }
.slick-next{ right: 0 }
.slick-prev{
...inner arrow styles...
}

Appreciate the feedback and will definitely take it into consideration.

[talentedaamer]

@isaacalves in the slick slider settings you will see next & prev Arrows as string or jQuery selector.

prevArrow: string (html | jQuery selector)

prevArrow: string (html | jQuery selector)

so define your arrows in a container above or below the slider items wrap and position them with css.

<div class="container">
    <button class="prev slick-arrow"> < </button>
    <button class="next slick-arrow"> > </button>
</div>

define custom arrows in slick slider configurations.

$('.home-slider').slick({
    infinite: true,
    autoplay: true,
    prevArrow: $('.prev'),
    nextArrow: $('.next'),
});

[prantho-kumer]

@isaacalves in the slick slider settings you will see next & prev Arrows as string or jQuery selector.

prevArrow: string (html | jQuery selector)

prevArrow: string (html | jQuery selector)

so define your arrows in a container above or below the slider items wrap and position them with css.

<div class="container">
    <button class="prev slick-arrow"> < </button>
    <button class="next slick-arrow"> > </button>
</div>

define custom arrows in slick slider configurations.

$('.home-slider').slick({
    infinite: true,
    autoplay: true,
    prevArrow: $('.prev'),
    nextArrow: $('.next'),
});

Thanks a lot. Its works

[juandelaoliva]

@isaacalves in the slick slider settings you will see next & prev Arrows as string or jQuery selector.

prevArrow: string (html | jQuery selector)

prevArrow: string (html | jQuery selector)

so define your arrows in a container above or below the slider items wrap and position them with css.

<div class="container">
    <button class="prev slick-arrow"> < </button>
    <button class="next slick-arrow"> > </button>
</div>

define custom arrows in slick slider configurations.

$('.home-slider').slick({
    infinite: true,
    autoplay: true,
    prevArrow: $('.prev'),
    nextArrow: $('.next'),
});

Thank you!! very helpful 😄