jQuery-Slick轮播-在这种情况下如何使用appendTo（）？

Question

我正在使用Slick轮播 jQuery插件。 在文档中，它有一个选项appendArrows 。 据我了解，它可以用于使箭头粘贴到其他元素上。 我使用嵌套的轮播，以便每个幻灯片都有一个标题，链接，描述，然后是几个子幻灯片，它们是图片。 在默认设置下，导航箭头位于整个幻灯片的中心。 我希望仅将它们附加到图片上，但是我不知道该怎么做。 appendArrows: $('img')不起作用。

这是标记：

<div class="slider-for">

            <div class="single-item">
                <h4>Title</h4>
                <a href=“#” target="_blank">example.com</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.com</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.com</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>

和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'),
    });`

编辑：我认为问题不清楚，我不好。 .slider-for是由示例中省略的.slider-nav切换的。 一切正常，我的问题更多是美学。 当箭头附加到整个.single-item它们垂直居中.single-item在整个<div class="single-item">的高度上，这看起来很奇怪，因为只有其中的<img>实际在滑动。 我想将箭头附加到<img> ，以便它们将垂直居中放置到图像的高度。 我希望这更有意义。

我想我真正要问的是：如何使用appendArrows() <div class="single-item">内部的<img> ？ 文档状态：

选项：appendArrows; 类型：字符串； 默认值：$（element）; 描述：更改导航箭头的附加位置（选择器，htmlString，数组，元素，jQuery对象）

如何使用？ 请记住，我是一个初学者，我不太了解JS，所以我可能缺少明显的东西。

Answer 1

考虑添加以下CSS：

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

并修改JS以反映以下内容：

$('.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
    });

如果上面的命令产生了所需的输出，则可以通过调整.slick-next的right属性来调整下一个箭头的位置。

Answer 2

我知道了。 这是一个愚蠢的错误。 我只是将<div class="single-item">下移，仅包装<img>并将整个东西包装在另一个div 。 像这样：

    <div>
            <h4>Title</h4>
            <a href=“#” target="_blank">example.com</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>