I’m using Slick carousel jQuery plugin. In the docs it has an option appendArrows. As I understand it can be used to make the arrows stick to a different element. I use a carousel that is nested so that each slide has a title, link, description and than a couple sub-slides that are pictures. With the default settings the nav arrows are centred to the whole slide. I’d like them to be appended only to the pictures but I can’t figure out how to do it. appendArrows: $('img’) does not work.

Here’s the markup:

<div class="slider-for">

            <div class="single-item">
                <h4>Title</h4>
                <a href=“#” target="_blank">example</a>
                <p>Description.</p>
                <img class="img-responsive" src="">
                <img class="img-responsive" src="">
                <img class="img-responsive" src="">
                <img class="img-responsive" src="">
                <img class="img-responsive" src="">
            </div>

            <div class="single-item">
                <h4>Title</h4>
                <a href=“#” target="_blank">example</a>
                <p>Description.</p>
                <img class="img-responsive" src="">
                <img class="img-responsive" src="">
                <img class="img-responsive" src="">
                <img class="img-responsive" src="">
                <img class="img-responsive" src="">
            </div>

    <div class="single-item">
                <h4>Title</h4>
                <a href=“#” target="_blank">example</a>
                <p>Description.</p>
                <img class="img-responsive" src="">
                <img class="img-responsive" src="">
                <img class="img-responsive" src="">
                <img class="img-responsive" src="">
                <img class="img-responsive" src="">
            </div>

</div>

And JS:

$('.slider-for').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        fade: true,
        swipe: false,
        accessibility: false,
        arrows: false,
    });

 $('.single-item').slick({
        slide: 'img',
        dots: true,
        speed: 500,
        arrows: true,
        appendArrows: $('img'),
    });`

EDIT: I think the question was not clear, my bad. The .slider-for is toggled by a .slider-nav that I omitted from the example. It all works, my problem is more one of aesthetics. When the arrows are appended to the whole .single-itemthey are centred vertically to the height of the whole <div class="single-item"> and that looks odd since only the <img>s inside it are actually sliding. I'd like to append the arrows to the <img>'s so that they will be centred vertically to the height of the image. I hope that makes more sense.

I guess what I'm asking really is: how do I target the <img>'s inside <div class="single-item"> with appendArrows()? The docs state:

Option: appendArrows; Type: string; Default: $(element); Desc.: Change where the navigation arrows are attached (Selector, htmlString, Array, Element, jQuery object)

How do I use that? Please bear in mind that I'm a total beginner, I don't know much JS, so I'm probably missing something obvious.

I’m using Slick carousel jQuery plugin. In the docs it has an option appendArrows. As I understand it can be used to make the arrows stick to a different element. I use a carousel that is nested so that each slide has a title, link, description and than a couple sub-slides that are pictures. With the default settings the nav arrows are centred to the whole slide. I’d like them to be appended only to the pictures but I can’t figure out how to do it. appendArrows: $('img’) does not work.

Here’s the markup:

<div class="slider-for">

            <div class="single-item">
                <h4>Title</h4>
                <a href=“#” target="_blank">example.</a>
                <p>Description.</p>
                <img class="img-responsive" src="http://placehold.it/960x540">
                <img class="img-responsive" src="http://placehold.it/960x540">
                <img class="img-responsive" src="http://placehold.it/960x540">
                <img class="img-responsive" src="http://placehold.it/960x540">
                <img class="img-responsive" src="http://placehold.it/960x540">
            </div>

            <div class="single-item">
                <h4>Title</h4>
                <a href=“#” target="_blank">example.</a>
                <p>Description.</p>
                <img class="img-responsive" src="http://placehold.it/960x540">
                <img class="img-responsive" src="http://placehold.it/960x540">
                <img class="img-responsive" src="http://placehold.it/960x540">
                <img class="img-responsive" src="http://placehold.it/960x540">
                <img class="img-responsive" src="http://placehold.it/960x540">
            </div>

    <div class="single-item">
                <h4>Title</h4>
                <a href=“#” target="_blank">example.</a>
                <p>Description.</p>
                <img class="img-responsive" src="http://placehold.it/960x540">
                <img class="img-responsive" src="http://placehold.it/960x540">
                <img class="img-responsive" src="http://placehold.it/960x540">
                <img class="img-responsive" src="http://placehold.it/960x540">
                <img class="img-responsive" src="http://placehold.it/960x540">
            </div>

</div>

And JS:

$('.slider-for').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        fade: true,
        swipe: false,
        accessibility: false,
        arrows: false,
    });

 $('.single-item').slick({
        slide: 'img',
        dots: true,
        speed: 500,
        arrows: true,
        appendArrows: $('img'),
    });`

EDIT: I think the question was not clear, my bad. The .slider-for is toggled by a .slider-nav that I omitted from the example. It all works, my problem is more one of aesthetics. When the arrows are appended to the whole .single-itemthey are centred vertically to the height of the whole <div class="single-item"> and that looks odd since only the <img>s inside it are actually sliding. I'd like to append the arrows to the <img>'s so that they will be centred vertically to the height of the image. I hope that makes more sense.

I guess what I'm asking really is: how do I target the <img>'s inside <div class="single-item"> with appendArrows()? The docs state:

Option: appendArrows; Type: string; Default: $(element); Desc.: Change where the navigation arrows are attached (Selector, htmlString, Array, Element, jQuery object)

How do I use that? Please bear in mind that I'm a total beginner, I don't know much JS, so I'm probably missing something obvious.

• javascript
• jquery
• jquery-plugins
• carousel
• slick.js

• appendArrows probably accepts only a unique container element i.e. an element ID. Can you post a jsfiddle? – Alex Hill Commented Oct 21, 2014 at 21:09
• So should I add e.g. #slide to the <img>'s, and then appendArrows: $('#slide')? I can't make a jsfiddle since I'm not at home right now. – filiplaw Commented Oct 21, 2014 at 21:36
• No. ID's must be unique on a page. Also, you should not be trying to attach the arrows to every image element. The appendArrows function exists to append the left/right arrows to a single DOM element only. You should be appending them to the .slider-for element. – Alex Hill Commented Oct 21, 2014 at 21:41
• Of course you're right about the ID's. Noob error. ;) As I said in one of the ments under Gregory's answer, I want the arrows to toggle the <img>'s inside .single-item, the .slider-for is taken care of by .slider-nav that I omitted in the example code. I quess my question was not clear, should have provided the whole code. Sorry about that. – filiplaw Commented Oct 21, 2014 at 21:51

2 Answers 2

Consider adding the following CSS:

.slick-prev
{
    position: absolute;
    left: 0px;
}
.slick-next
{
    position: absolute;
    right: 50px;
}

and amend the JS to reflect the following:

$('.slider-for').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        fade: true,
        swipe: false,
        accessibility: false,
        arrows: true
    });
    $('.single-item').slick({
        slide: 'img',
        dots: true,
        speed: 500,
        arrows: false
    });

If the above produces your desired output, you can tweak the position of the next arrow by adjusting the right property of .slick-next

I got it. It was a silly mistake. I just moved the <div class="single-item"> down, to wrap only the <img>'s and wrapped the whole thing in another div. Like this:

    <div>
            <h4>Title</h4>
            <a href=“#” target="_blank">example.</a>
            <p>Description.</p>
        <div  class="single-item">
            <img class="img-responsive" src="http://placehold.it/960x540">
            <img class="img-responsive" src="http://placehold.it/960x540">
            <img class="img-responsive" src="http://placehold.it/960x540">
            <img class="img-responsive" src="http://placehold.it/960x540">
            <img class="img-responsive" src="http://placehold.it/960x540">
        </div>
    </div>