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>