幻灯片 - 根据 position 禁用左键或右键

Question

I have coded a small slideshow script, which scrolls left and right.

I am hoping for some advice or guidance; as I am stuck for inspiration or a possible solution.

How would you identify if you are at the beginning or end, to respectively disable the left or right button?

 window.addEventListener('DOMContentLoaded', () => { let one = new slideShow('merchandising'); }) function slideShow(element) { this.scrollContainer = document.getElementById(element); this.scrollLeft = this.scrollContainer.getElementsByClassName('left')[0]; this.scrollRight = this.scrollContainer.getElementsByClassName('right')[0]; this.move = (amount) => { this.scrollContainer.scrollLeft += amount; } this.scrollLeft.addEventListener('click', () => { this.move(-225); }) this.scrollRight.addEventListener('click', () => { this.move(225) }) }

 #merchandising { overflow-x: scroll; white-space: nowrap; }.slot { height: 200px; width: 200px; background: red; padding: 5px; margin: 5px; display: inline-block; }.left { display: block; position: absolute; left: 0; }.right { display: block; position: absolute; right: 0; }

 <div id='merchandising'> <button class='left'>left</button> <button class='right'>right</button> <div class='slot'>one</div> <div class='slot'>two</div> <div class='slot'>three</div> <div class='slot'>four</div> <div class='slot'>five</div> <div class='slot'>six</div> <div class='slot'>seven</div> <div class='slot'>eight</div> <div class='slot'>nine</div> <div class='slot'>ten</div> </div>

Answer 1

Its not the complete logic for a slider but i think you get the idea:)

 window.addEventListener('DOMContentLoaded', () => { let one = new slideShow('merchandising'); }) function slideShow(element) { this.scrollContainer = document.getElementById(element); this.scrollLeft = this.scrollContainer.getElementsByClassName('left')[0]; this.scrollRight = this.scrollContainer.getElementsByClassName('right')[0]; this.move = (amount) => { this.scrollContainer.scrollLeft += amount; } this.scrollLeft.addEventListener('click', () => { this.move(-225); if (this.scrollContainer.scrollLeft === 0) { document.getElementsByClassName('left')[0].classList.remove('previous'); } }) this.scrollRight.addEventListener('click', () => { this.move(225) if (this.scrollContainer.scrollLeft > 0) { document.getElementsByClassName('left')[0].classList.add('previous'); } }) }

 #merchandising { overflow-x: scroll; white-space: nowrap; }.slot { height: 200px; width: 200px; background: red; padding: 5px; margin: 5px; display: inline-block; }.left { display: none; position: absolute; left: 0; }.left.previous { display: block; }.right { display: block; position: absolute; right: 0; }

 <div id='merchandising'> <button class='left'>left</button> <button class='right'>right</button> <div class='slot'>one</div> <div class='slot'>two</div> <div class='slot'>three</div> <div class='slot'>four</div> <div class='slot'>five</div> <div class='slot'>six</div> <div class='slot'>seven</div> <div class='slot'>eight</div> <div class='slot'>nine</div> <div class='slot'>ten</div> </div>

Answer 2

You need to check on right click function like ((this.scrollContainer.scrollLeft + this.scrollContainer.offsetWidth) == this.scrollContainer.scrollWidth)

I hope this snippet will help you lot.

 window.addEventListener('DOMContentLoaded', () => { let one = new slideShow('merchandising'); }) function slideShow(element) { this.scrollContainer = document.getElementById(element); this.scrollLeft = this.scrollContainer.getElementsByClassName('left')[0]; this.scrollRight = this.scrollContainer.getElementsByClassName('right')[0]; this.move = (amount) => { this.scrollContainer.scrollLeft += amount; } this.scrollLeft.addEventListener('click', () => { this.move(-225); document.getElementsByClassName('right')[0].classList.remove('hide'); if (this.scrollContainer.scrollLeft === 0) { document.getElementsByClassName('left')[0].classList.remove('previous'); } }) this.scrollRight.addEventListener('click', () => { this.move(225); document.getElementsByClassName('right')[0].classList.remove('hide'); if (this.scrollContainer.scrollLeft > 0) { document.getElementsByClassName('left')[0].classList.add('previous'); if((this.scrollContainer.scrollLeft + this.scrollContainer.offsetWidth) == this.scrollContainer.scrollWidth){ document.getElementsByClassName('right')[0].classList.add('hide'); } } }) }

 #merchandising { overflow-x: scroll; white-space: nowrap; }.slot { height: 200px; width: 200px; background: red; padding: 5px; margin: 5px; display: inline-block; }.left { display: none; position: absolute; left: 0; }.left.previous { display: block; }.right { display: block; position: absolute; right: 0; }.right.hide { display: none; }

 <div id='merchandising'> <button class='left'>left</button> <button class='right'>right</button> <div class='slot'>one</div> <div class='slot'>two</div> <div class='slot'>three</div> <div class='slot'>four</div> <div class='slot'>five</div> <div class='slot'>six</div> <div class='slot'>seven</div> <div class='slot'>eight</div> <div class='slot'>nine</div> <div class='slot'>ten</div> </div>