Lory slider nav with thumbs

loryWithThumbs

 import {lory} from 'lory.js';

    document.addEventListener('DOMContentLoaded', () => {
        const productSlider = document.querySelector('.product-page-slider');
        const productSliderCount = productSlider.querySelectorAll('.slide').length;
        const productNavContainer = productSlider.querySelector('.product-page-slider__nav');
        const productNavItem = document.createElement('li')
        const productNavItemInner = document.createElement('div')

        function handleSliderNav(e) {
          if (e.type === 'before.lory.init') {
            for (let i = 0; i < productSliderCount; i++) {
              let clone = productNavItem.cloneNode();

              let backgroundImg = productSlider.querySelector('.js_slides').children[i].style.backgroundImage;

              let cloneInner = productNavItemInner.cloneNode();
              cloneInner.style.backgroundImage = backgroundImg;
              clone.appendChild(cloneInner);
              productNavContainer.appendChild(clone);
            }

            productNavContainer.childNodes[0].classList.add('is-active');
          }

          if (e.type === 'after.lory.init') {
            for (let i = 0; i < productSliderCount; i++) {
              productNavContainer.childNodes[i].addEventListener('click', function(e){
                renderProductSlider.slideTo(Array.prototype.indexOf.call(productNavContainer.childNodes, e.target));
              });
            }
          }

          if (e.type === 'after.lory.slide') {
            for (let i = 0; i < productSliderCount; i++) {
              productNavContainer.childNodes[i].classList.remove('is-active');
            }
            productNavContainer.childNodes[e.detail.currentSlide - 1].classList.add('is-active');
          }
        }

        productSlider.addEventListener('before.lory.init', handleSliderNav);
        productSlider.addEventListener('after.lory.init', handleSliderNav);
        productSlider.addEventListener('after.lory.slide', handleSliderNav);

        const renderProductSlider = lory(productSlider, {
            enableMouseEvents: true,
            infinite: true,
        });
    });