我正在使用Tiny-Slider 2并偶然发现了此错误：显示最后一张幻灯片时，next按钮没有获得[disabled]属性。这是Codepen。要重现该问题，请单击next按钮，直到滑块停止移动幻灯片，您将看到next按钮不具有[disabled]属性。 next按钮只有在再单击几次后才会获得[disabled]属性。
最佳答案
小滑块版本：2.9.1
先创建您自己的按钮（箭头），然后为它们分配标识符，基于容器的宽度和块的宽度的代码将设置参数disable = true | false。
示例https://codepen.io/cvaize/pen/zYYVRGo
const prev = document.getElementById('road-map-prev')
const next = document.getElementById('road-map-next')
const roadMap = tns({
container: "#road-map",
gutter: 43,
autoWidth: true,
mouseDrag: false,
loop: false,
nav: false
});
prev.addEventListener('click', () => {
if(!prev.disabled){
roadMap.goTo('prev')
}
})
next.addEventListener('click', () => {
if(!next.disabled){
roadMap.goTo('next')
}
})
roadMap.events.on('indexChanged', (v) => {
const item = document.querySelectorAll('#road-map .tns-item')
const roadMapIW = document.getElementById('road-map-iw')
let index = v.displayIndex - 1
let fullWidth = 0
let offsetWidth = 0
item.forEach((value, index2) => {
fullWidth += value.offsetWidth
if(index2 < index){
offsetWidth = fullWidth
}
})
prev.disabled = (index === 0)
next.disabled = (fullWidth - offsetWidth < roadMapIW.offsetWidth)
});.tns-controls{
display: none;
}<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/tiny-slider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
</head>
<body>
<div id="app">
<div class="road-map overflow-hidden">
<div class="container">
<h2>Road map SO</h2>
<div class="road-map-controls" aria-label="Carousel Navigation" tabindex="0">
<button id="road-map-prev" data-controls="prev" tabindex="-1" aria-controls="road-map" disabled>prev</button>
<button id="road-map-next" data-controls="next" tabindex="-1" aria-controls="road-map">next</button>
</div>
<div id="road-map">
<div>
<div class="text-primary">1 ноября</div>
Формирование идеи, <br />исследование рынка
</div>
<div>
<div class="text-primary">1 декабря</div>
Создание команды
</div>
<div>
<div class="text-primary">1 января</div>
Презентация проекта <br />на тематических <br />сайтах и форумах
</div>
<div>
<div class="text-primary">4 февраля</div>
Начало баунти <br />программы
</div>
<div>
<div class="text-primary">2 марта</div>
Pre-sale
</div>
<div>
<div class="text-primary">1 ноября</div>
Формирование идеи, <br />исследование рынка
</div>
<div>
<div class="text-primary">1 декабря</div>
Создание команды
</div>
<div>
<div class="text-primary">1 января</div>
Презентация проекта <br />на тематических <br />сайтах и форумах
</div>
<div>
<div class="text-primary">4 февраля</div>
Начало баунти <br />программы
</div>
<div>
<div class="text-primary">2 марта</div>
Pre-sale
</div>
<div>
<div class="text-primary">1 ноября</div>
Формирование идеи, <br />исследование рынка
</div>
<div>
<div class="text-primary">1 декабря</div>
Создание команды
</div>
<div>
<div class="text-primary">1 января</div>
Презентация проекта <br />на тематических <br />сайтах и форумах
</div>
<div>
<div class="text-primary">4 февраля</div>
Начало баунти <br />программы
</div>
<div>
<div class="text-primary">2 марта</div>
Pre-sale
</div>
</div>
</div>
</div>
</div>
</body>
</html>