I am attempting to use the Embla Carousel library, and I am having trouble getting the dots to work properly. I tried copying some of the code from the examples, and I get the following error:
"can't access lexical declaration 'generateDotBtns' before initialization"
var options = { delay: 4000, play: true, active: true, speed: 6, loop: true }
var plugins = [EmblaCarouselAutoplay()]
const rootNode = document.querySelector('.embla')
const viewportNode = rootNode.querySelector('.embla__viewport')
const prevButtonNode = rootNode.querySelector('.embla__prev')
const nextButtonNode = rootNode.querySelector('.embla__next')
const dots = document.querySelector(".embla__dots");
const embla = EmblaCarousel(viewportNode, options, plugins)
const dotsArray = generateDotBtns(dots, embla);
const setSelectedDotBtn = selectDotBtn(dotsArray, embla);
prevButtonNode.addEventListener('click', embla.scrollPrev, false)
nextButtonNode.addEventListener('click', embla.scrollNext, false)
setupDotBtns(dotsArray, embla);
embla.on("select", setSelectedDotBtn);
embla.on("init", setSelectedDotBtn);
const setupDotBtns = (dotsArray, embla) => {
dotsArray.forEach((dotNode, i) => {
dotNode.addEventListener("click", () => embla.scrollTo(i), false);
});
};
const generateDotBtns = (dots, embla) => {
const template = document.getElementById("embla-dot-template").innerHTML;
dots.innerHTML = embla.scrollSnapList().reduce(acc => acc + template, "");
return [].slice.call(dots.querySelectorAll(".embla__dot"));
};
const selectDotBtn = (dotsArray, embla) => () => {
const previous = embla.previousScrollSnap();
const selected = embla.selectedScrollSnap();
dotsArray[previous].classList.remove("is-selected");
dotsArray[selected].classList.add("is-selected");
};