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>实际上只是在滑动。我想将箭头附加到<img>，以便它们垂直居中于图像的高度。我希望这更有意义。

我想我真正要问的是：如何定位<img> <div class="single-item"> appendArrows()内的{{1}}？文档声明：

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

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

2 个答案: