I have built a pretty complex slider and now have to build it so it can be removed and re-added to the page based on a selection. I have a simple click event listener for the pagination to call all my animations and timers that looks like this
let $slideItems = $slideShow.querySelector('.slideshow-items'),
$slideshowNav = $slideShow.querySelector('.slideshow-nav'),
$slideshowNavButton = $slideshowNav.getElementsByTagName('button');
forEach($slideshowNavButton, (index, el) => {
el.addEventListener('click', function() {
let isActive = this.classList.contains('active');
if (!isActive) {
clearTimeout(timer);
slideshowClick($slideShow, this);
slideshowAnimations($slideShow, index);
slideTimer();
}
});
});
I use the forEach function as a for loop to go through all the elements I need, like having multiple $slideShow
's on the page, and return them as an indexed array. The issue I am having is that I need to add a functionality in which the $slideshowNav
and all the $slideshowNavButton
s get removed and rebuilt from a function outside of the $slideshow
function and can't figure out how to rebind the click event without repeating all of the code. Is there a way to bind this event to the $slideshow
object, similar to the way jQuery's .on
function works or rebind the click event to the new $slideshowNavButton
's after they are created? I am not able to use jQuery so I can't use the .on
function.