到达水平滚动结束时如何设置 [disabled] attr？ （小滑块）

Question

我正在使用Tiny-Slider 2并偶然发现了这个错误：显示最后一张幻灯片时， next按钮没有获得[disabled]属性。 这是Codepen 。
要重现该问题，请单击next按钮，直到滑块停止移动幻灯片，您将看到next按钮没有[disabled]属性。 next按钮将在点击几下后才会获得[disabled]属性。

Answer 1

Tiny-slider 版本：2.9.1 创建自己的按钮（箭头）上一个和下一个，为它们分配标识符，基于容器宽度和块宽度的代码将设置参数禁用 = 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>