我想将光滑 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=""> <- </button>
<button type="button" class="slick-next slick-arrow" style=""> -> </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=""> <- </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=""> -> </button>
</div>
我知道我可以用 CSS 定位按钮,但有几个原因,我需要这样的 HTML。
有什么办法吗?
最佳答案
我找到了一个解决方案。 您可以添加以下代码以将特定按钮用作 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>
关于javascript - 光滑 slider 中按钮之间的位置点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48726305/