javascript - 光滑 slider 中按钮之间的位置点

Question

我想将光滑 slider 的点定位在上一个和下一个按钮之间。Slick 提供设置让您定位点/按钮。但它们会互相显示。

这是我的代码:

$('.slider').slick({
    arrows: true,
    prevArrow: '<button type="button" class="slick-prev"> <- </button>',
    nextArrow: '<button type="button" class="slick-next"> -> </button>',
    appendArrows:$('.slider-controls'),
    dots: true,
    appendDots:$('.slider-controls'),
});

它生成这样的控件:

<div class="slider-controls d-flex align-items-center justify-content-center">
    <button type="button" class="slick-prev slick-arrow" style=""> &lt;- </button>
    <button type="button" class="slick-next slick-arrow" style=""> -&gt; </button>
    <ul class="slick-dots" style="" role="tablist">
        <li class="slick-active" role="presentation"><button type="button" role="tab" id="slick-slide-control00" aria-controls="slick-slide00" aria-label="1 of 3" tabindex="0" aria-selected="true">1</button></li>
        <li role="presentation" class=""><button type="button" role="tab" id="slick-slide-control01" aria-controls="slick-slide01" aria-label="2 of 3" tabindex="-1">2</button></li>
        <li role="presentation" class=""><button type="button" role="tab" id="slick-slide-control02" aria-controls="slick-slide02" aria-label="3 of 3" tabindex="-1">3</button></li>
    </ul>
</div>

但我想要/需要这样的:

<div class="slider-controls d-flex align-items-center justify-content-center">
    <button type="button" class="slick-prev slick-arrow" style=""> &lt;- </button>

    <ul class="slick-dots" style="" role="tablist">
        <li class="slick-active" role="presentation"><button type="button" role="tab" id="slick-slide-control00" aria-controls="slick-slide00" aria-label="1 of 3" tabindex="0" aria-selected="true">1</button></li>
        <li role="presentation" class=""><button type="button" role="tab" id="slick-slide-control01" aria-controls="slick-slide01" aria-label="2 of 3" tabindex="-1">2</button></li>
        <li role="presentation" class=""><button type="button" role="tab" id="slick-slide-control02" aria-controls="slick-slide02" aria-label="3 of 3" tabindex="-1">3</button></li>
    </ul>

    <button type="button" class="slick-next slick-arrow" style=""> -&gt; </button>
</div>

我知道我可以用 CSS 定位按钮，但有几个原因，我需要这样的 HTML。

有什么办法吗？

Answer 1

我找到了一个解决方案。您可以添加以下代码以将特定按钮用作 lin

nextArrow: $('#next')

然后添加带有 ID 的自定义按钮:

<button type="button" class="slick-next" id="next"> <- </button>

完整代码:

$('.slider').slick({
    arrows: true,
    prevArrow: $('#prev'),
    nextArrow: $('#next'),
    dots: true,
});

    <button type="button" class="slick-prev" id="prev"> -> </button>

    <div class="slider">
            <div>your content</div>
            <div>your content</div>
            <div>your content</div>
    </div>

    <button type="button" class="slick-next" id="next"> -> </button>