jQuery - Slick carousel - 在这种情况下如何使用 appendTo()？

Question

我正在使用Slick carousel jQuery 插件。在docs 中有一个选项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 时，它们垂直居中于整个 <div class="single-item"> 的高度，这看起来很奇怪，因为它里面只有 <img>s 实际上在滑动。我想将箭头附加到<img>'s，以便它们垂直居中于图像的高度。我希望这更有意义。

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

选项：appendArrows；类型：字符串；默认值：$（元素）；描述：改变 附加导航箭头的位置（选择器、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>