<style>
.slider--8 .slider--8__navCt .slider--8__button {
	align-items: center;
  background-color: transparent;
  color: #db2323;
  display: flex;
  font-weight: 600;
  gap: 1rem;
  outline: none;
}

.slider--8 .slider--8__navCt .slider--8__button:disabled {
	color: #fff;  
}
  
.slider--8__button .slider--8__icon {
  fill: currentColor;
	width: 21px;
}
</style>

<script>
const slider8CounterLive = document.querySelector('.slider--8__counterLive'),
	slider8CounterLength = document.querySelector('.slider--8__counterLength'),
  bmsliderBtnPrev8 = document.querySelector('.slider--8__buttonPrev'),
	bmsliderBtnNext8 = document.querySelector('.slider--8__buttonNext'),
  bmCurrent1stSliderId8 = document.querySelector('.slider--8__main--1'),
	bmNew1stSliderId8 = bmCurrent1stSliderId8.getAttribute('data-script-id'),
  bmCurrent2ndSliderId8 = document.querySelector('.slider--8__main--2'),
	bmNew2ndSliderId8 = bmCurrent2ndSliderId8.getAttribute('data-script-id');
  
window.addEventListener('load', function() {
  bmCurrent1stSlider8 = bricksData.splideInstances[`${bmNew1stSliderId8}`];
  bmCurrent2ndSlider8 = bricksData.splideInstances[`${bmNew2ndSliderId8}`];
  bmCurrent1stSlideLength8 = bricksData.splideInstances[`${bmNew1stSliderId8}`].length;
  
  bmCurrent1stSlider8.on( 'move', () => {
    let bmCurrentIndex8 = bmCurrent1stSlider8.index + 1,
    	bmCurrentNewIndex8 = bmCurrentIndex8.toString();
  	slider8CounterLive.textContent = bmCurrentNewIndex8.padStart(2, '0');
  });

  let bmOldCurrent1stSlideLength8 = bmCurrent1stSlideLength8,
  	bmNewCurrent1stSlideLength8 = bmOldCurrent1stSlideLength8.toString();
  slider8CounterLength.textContent = `/ ${bmNewCurrent1stSlideLength8.padStart(2, '0')}`;
  
  bmsliderBtnPrev8.addEventListener('click', function() {
    if(bmCurrent1stSlider8.index === bmCurrent1stSlider8.length- 1) {
      bmsliderBtnNext8.disabled = false;
  	}
    
    bmCurrent1stSlider8.go( '<' );
    bmCurrent2ndSlider8.go( '<' );
    
    if(bmCurrent2ndSlider8.index === 0) {
      this.disabled = true;
  	}
  });
  
  bmsliderBtnNext8.addEventListener('click', function() {
    if(bmCurrent2ndSlider8.index === 0) {
      bmsliderBtnPrev8.disabled = false;
  	}
    
    bmCurrent1stSlider8.go( '>' );
    bmCurrent2ndSlider8.go( '>' );
      
    if(bmCurrent2ndSlider8.index === bmCurrent2ndSlider8.length- 1) {
      this.disabled = true;
  	}
  });
});

function setNavPosition() {
  if (window.matchMedia("(max-width: 991px)").matches) {
    const main = document.querySelector('.slider--8__main');
    const navCt = document.querySelector('.slider--8__navCt');

    const mainHeight = main.offsetHeight;
    const navCtHeight = navCt.offsetHeight;
    const navCtHalf = navCtHeight / 2;

    navCt.style.top = `${mainHeight - navCtHalf}px`;
  }
};
  
window.addEventListener('load', setNavPosition);

</script>