将 SlickJS AsNavFor 方法限制为父项的子项 div

Question

我有一个滑块，很可能是页面上的几个滑块之一。我希望 AsNavFor 只影响与其相关的滑块（两者都在父 div 内）这可能吗？滑块是在 CMS 中构建的，因此让它们使用单独的 ID 或类是不切实际的，因此特异性似乎是我最好的选择，但我没有很好地解决这个问题。

可以在这里看到滑块：https://futurepresent.agency/powerpoint-but-better/

Answer 1

是的，这是可能的。 asNavFor 选项还接受 jQuery 对象，而不仅仅是 class/ID 字符串。请参阅下面的基本示例，该示例使用相邻的轮播作为 asNavFor 选项：

$(function() {
    $("section").each(function() {
        var section   = $(this);
        var carousels = section.find(".carousel");

        // Iterate through each carousel in this section - assuming there are always 2
        carousels.each(function(i, el) {
            if (i === 0) {
                // If this is the first carousel (index 0), use the next carousel in the jQuery object
                $(el).slick({
                    asNavFor: carousels.eq(1)
                })
            } else {
                $(el).slick();
            }
        })
    })
})

img {
    max-width: 64px;
}

section:not(:last-of-type) {
    margin-bottom: 50px;
}

<section>
    <div class="carousel">
        <img src="https://via.placeholder.com/64x64?text=1:1" />
        <img src="https://via.placeholder.com/64x64?text=1:2" />
        <img src="https://via.placeholder.com/64x64?text=1:3" />
    </div>
    <div class="carousel">
        <img src="https://via.placeholder.com/64x64?text=2:1" />
        <img src="https://via.placeholder.com/64x64?text=2:2" />
        <img src="https://via.placeholder.com/64x64?text=2:3" />
    </div>
</section>

<section>
    <div class="carousel">
        <img src="https://via.placeholder.com/64x64?text=3:1" />
        <img src="https://via.placeholder.com/64x64?text=3:2" />
        <img src="https://via.placeholder.com/64x64?text=3:3" />
    </div>
    <div class="carousel">
        <img src="https://via.placeholder.com/64x64?text=4:1" />
        <img src="https://via.placeholder.com/64x64?text=4:2" />
        <img src="https://via.placeholder.com/64x64?text=4:3" />
    </div>
</section>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />

将 SlickJS AsNavFor 方法限制为父项的子项 div

Restricting the SlickJS AsNavFor method to the child of a parent div

slick.js