Glide slider dual controlled sliders

slider.html

<div id="reviewsSlider" class="glide js-reviewSliderComponent" data-bindcontrols="#reviewsCarousel">
  <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
      <!--        generic slider content          -->
    </ul>
  </div>
</div>

<div id="reviewsCarousel" class="glide js-reviewSliderCarouselComponent" data-bindcontrols="#reviewsSlider">
  <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
      <!--        generic slider content          -->
    </ul>
  </div>
</div>

sliders.js

import Glide from '@glidejs/glide'

var hb_gotoSlide=function(instance, target){
  return new Promise(function(resolve, reject){
    instance.go(target)
    resolve('moved')
  })
}

var sliders=document.querySelectorAll('.js-reviewSliderComponent'),
  slideConfig={
    type: 'carousel',
    perView: 1,
    focusAt: 'center',
    throttle: 60
  },
  slidersArr={},
  carouselsArr={}

if (sliders&&sliders.length) {

  sliders.forEach(function(sld, index, arr){
    let conf=slideConfig
    let glideSlider = new Glide(sld, conf)
    let controlledCarousel = sld.dataset.bindcontrols
    if (sld.id!==undefined) {
      slidersArr['#'+sld.id]=glideSlider
    }

    sld.parentNode.querySelectorAll('.js-sliderArrow').forEach(function(arrow){
      arrow.addEventListener('click', function(event){
        hb_gotoSlide(glideSlider, arrow.dataset.glideDir).then(
          function(result){
            if (result=='moved'&&carouselsArr[controlledCarousel]!==undefined) {
              hb_gotoSlide(carouselsArr[controlledCarousel], arrow.dataset.glideDir)
            }
          }
        )
      })
    })


    glideSlider.on('run.before', function(e) {
      if (carouselsArr[sld.dataset.bindcontrols]!==undefined) {
        hb_gotoSlide(carouselsArr[controlledCarousel], e.direction)
      }
    })

    window.addEventListener('load', function(){
      glideSlider.mount()
    })
  })
}

var carousels=document.querySelectorAll('.js-reviewSliderCarouselComponent')
if (carousels&&carousels.length) {
  let conf=slideConfig
  conf.type='slider'
  conf.perView=2
  conf.gap=34
  conf.focusAt=0
  conf.dragThreshold=false

  carousels.forEach(function(sld, index, arr){
    let carouselSlider = new Glide(sld, conf),
      controlledSlider=sld.dataset.bindcontrols
    if (sld.id!==undefined) {
      carouselsArr['#'+sld.id]=carouselSlider
    }

    let slides=sld.querySelectorAll('.glide__slide')
    if (slides.length) {
      slides.forEach(function(slide, ind, arr){
        slide.addEventListener('click', function(event){
          event.stopPropagation()
          let goto='='+ind

          hb_gotoSlide(carouselSlider, goto).then(
            function(){
              hb_gotoSlide(slidersArr[controlledSlider], goto)
            }
          )
        })
      })
    }

    window.addEventListener('load', function(){
      carouselSlider.mount()
    })
  })
}