Trying To Use A Library: Getting Error "can't access lexical declaration 'generateDotBtns' before initialization"

Viewed 21

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");
     };
0 Answers
Related