我正在使用 Tiny-Slider 2并偶然发现了这个错误:显示最后一张幻灯片时，next 按钮没有获得 [disabled] 属性。这是 Codepen .
要重现问题，点击next按钮，直到 slider 停止移动幻灯片，你会看到next按钮没有 >[禁用] 属性。 next 按钮只有在点击几次后才会获得 [disabled] 属性。
最佳答案
微型 slider 版本:2.9.1 创建您自己的按钮(箭头)prev 和 next，为它们分配标识符，基于容器宽度和 block 宽度的代码将设置参数 disabled = 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>关于javascript - 到达水平滚动端时如何设置[禁用] attr？ (小 slider )，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59032980/