Slick: feature request

[rgblab]

would be nice to have nav arrows wrapped in parent div. why? when using full width slider to be able to maintain nav within grid.

[simeydotme]

Sorry, @rgblab , there's not enough details or description here for this to make it any further. Please feel free to elaborate and perhaps add a few pictures to help describe your scenario.

[rgblab]

hi, thanks for responding.

here is screenshot, hopefully you'll see what i have in mind: http://screencast.com/t/AJGTlcb6H

so, i need fullwidth slider. done. but, currently, only way to position nav arrows (prev and next buttons) is relative to browser width. i need to wrap them inside another div which will be in grid (since i'm using bootstrap) no matter what browser width is. to make them sit distanced approx 1200px.

i tried adding opening div tag into prevArrow string and closing div tag into nextArrow string, but guess regex before appendArrows is messing this approach.

or to be more precise, desired output of slider should be something like this: http://screencast.com/t/h8ssTzdcpFN

best regards

[simeydotme]

Hi, @rgblab ... it seems you are asking for support, not for a bug / feature in Slick. Please refer to the https://github.com/kenwheeler/slick/blob/master/CONTRIBUTING.markdown file in future on how to ask for support :smile:

As for your personal project, you can accomplish it very easy using the appendArrows option:

$(".slider").slick({
    appendArrows: ".row"
});

Here's a JSFiddle to show you:
http://jsfiddle.net/5cqz5tgc/

Simon.

[rgblab]

hi simon,

thanks again. since this is possible guess it's support rather than feature request. :)

i believe this is the last slider/carousel i'll ever need.

best regards.

[jovilog]

Sorry for bringing this up again.
I put this here, because the above describes exactly the problem. The appendArrows option requires a hard coded empty element - not good. It won't work when the wrapper is JS generated, for example like so:

            $(".slick").on("init", function( event, slick ) {
                $(this).append('<div class="slick-arrows"></div>');
            });
            $(".slick").slick({
                appendArrows: $(".slick-arrows"),
            });

I even tried opening the wrapper in prevArrow option before the button string, and closing it in nextArrow option after the button string. To no avail.

So, is this a feature request after all or am I missing a simple solution?

[simeydotme]

@jovilog -- is there a reason you are appending the <div> during init?
Anyway, here's some super clever shit right here for y'all ;)
http://jsfiddle.net/ygoahrnu/1/

appendArrows: $("<div />").addClass("new-arrows").insertAfter(".slider")

[jovilog]

That's pretty cool, however, the wrapping <div> is then outside of the whole slider container. It should be inside, for example for absolute positioning relative to the slider container.

But if I append it inside the whole slider container, it's recognized as another item to slide. Appending it during init solves this problem, but then appendArrows won't work.

Something like

appendArrows: $("<div />").addClass("slick-arrows").insertBefore(".slick-dots")

or

appendArrows: $("<div />").addClass("slick-arrows").appendTo(".slider")

would be cool.

[simeydotme]

if u looked at my fiddle... ;)

[jovilog]

Alright, that's awesome. Thanks a bunch.
I didn't expect your fiddle to use init, because you asked me why I use it...