After successfully creating a Bootstrap 5 Carousel with an automated count for each slide (limited to 4) and a corresponding progress bar, I encountered an issue with getting the previous button to function correctly. While clicking the next button works seamlessly, figuring out how to make the previous button work by decrementing the count and adjusting the progress bar has been challenging.
To resolve this issue, a revised script can be implemented:
var clicks = 1;
var number = 0;
var elem = document.getElementById("myBar");
function onSelect() {
clicks -= 1;
}
function onClick() {
clicks += 1;
if (clicks === 5) {
clicks = 1;
}
switch(clicks){
case 1:
elem.style.width = '25%';
break;
case 2:
elem.style.width = '50%';
break;
case 3:
elem.style.width = '75%';
break;
case 4:
elem.style.width = '100%';
break;
}
document.getElementById("testimonial-count").innerHTML = clicks;
};As I navigate through this challenge, I'm exploring options to introduce a new variable that mirrors "clicks" in order to facilitate the subtraction process and adjust the width of the progress bar accordingly. As a newcomer to this field, any guidance or assistance would be greatly appreciated!