var DS = DriftSlider;

var thumbSlider = new DS.DriftSlider('#thumb-slider', {
  modules: [DS.A11y],
  slidesPerView: 4,
  spaceBetween: 10,
  centeredSlides: true,
  speed: 400,
  grabCursor: true,
  on: {
    slideChange: function(s) {
      mainSlider.slideTo(s.realIndex);
      updateActiveThumbs(s.realIndex);
    },
  },
});

var mainSlider = new DS.DriftSlider('#main-slider', {
  modules: [DS.Navigation, DS.Pagination, DS.A11y],
  slidesPerView: 1,
  spaceBetween: 20,
  speed: 400,
  grabCursor: true,
  on: {
    slideChange: function(s) {
      thumbSlider.slideTo(s.realIndex);
      updateActiveThumbs(s.realIndex);
    },
  },
});

function updateActiveThumbs(index) {
  var thumbSlides = document.querySelectorAll('#thumb-slider .drift-slide');
  thumbSlides.forEach(function(slide, i) {
    slide.classList.toggle('thumb-active', i === index);
  });
}

// Set initial active thumb
updateActiveThumbs(0);