Issue
I have a slider with "next" and "previous" buttons, "previous" button is hidden.
I want to hide "next" button when last slide is shown and show "previous" button after first transform of the slide.
Want to implement it in Javascript, can you please help me?
let next = document.querySelector('.btn_next_slide'),
prev = document.querySelector('.btn_prev_slide'),
line = document.querySelector('.product_slider_line'),
slides = document.getElementsByClassName('product_slider').length,
step = document.querySelector('.product_slider').clientWidth
count = 0;
next.onclick = ()=> {
count ++;
if (count >= slides-1) count = slides-2;
line.style.transform = 'translate(' + `${- step * count}px)`;
};
prev.onclick = ()=> {
count --;
if (count <= 0) count = 0;
line.style.transform = 'translate(' + `${- step * count}px)`;
};
Solution
You could add a function which updates the visibility after every slide-change.
let next = document.querySelector('.btn_next_slide'),
prev = document.querySelector('.btn_prev_slide'),
line = document.querySelector('.product_slider_line'),
slides = document.getElementsByClassName('product_slider').length,
step = document.querySelector('.product_slider').clientWidth,
count = 0;
next.onclick = () => {
count++;
if (count >= slides - 1) count = slides - 2;
line.style.transform = 'translate(' + `${- step * count}px)`;
updateButtonVisibility();
};
prev.onclick = () => {
count--;
if (count <= 0) count = 0;
line.style.transform = 'translate(' + `${- step * count}px)`;
updateButtonVisibility();
};
function updateButtonVisibility() {
if (count === 0) {
// first slide
prev.style.visibility = 'hidden';
next.style.visibility = 'visible';
} else if (count === slides - 2) {
// last slide
prev.style.visibility = 'visible';
next.style.visibility = 'hidden';
} else {
// medium slide
prev.style.visibility = 'visible';
next.style.visibility = 'visible';
}
}
Answered By - Johannes Wulf
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.