Много слайдеров на одной странице, как сделать чтобы они работали и были независимыми

Проверьте код, пожалуйста, подскажите что делаю не так Хочу сделать скрипт, который получает все элементы с классом .slider, в каждом находит кнопку .prev или .next и при нажатии на эти кнопки, .slide-line именно этого слайдера менял style.transform

let widthSliderTwo
let countSliderTwo=0
const sliders=document.querySelectorAll('.slider')


for (let i = 0; i < sliders.length; i++) {

  init(sliders[i]);
}


function rollSliderTwo(){
  slider.querySelector('.slide-line').style.transform='translate(-'+countSliderTwo*widthSliderTwo+'px)'

}

function init(slider){
  widthSliderTwo=document.querySelector('.slider').offsetWidth
  let next=slider.querySelector('.next')
  let prev=slider.querySelector('.prev')
  next.onclick=()=>{
    if(countSliderTwo==2){
      countSliderTwo=0
    }else{countSliderTwo++};
    rollSliderTwo()
  }
  prev.onclick=()=>{
    if(countSliderTwo==0){
      countSliderTwo=2
    }else{countSliderTwo--}
    rollSliderTwo()

  }
}


    let widthSliderTwo
let countSliderTwo=0
const sliders=document.querySelectorAll('.slider')


for (let i = 0; i < sliders.length; i++) {

  init(sliders[i]);
}


function rollSliderTwo(){
  slider.querySelector('.slide-line').style.transform='translate(-'+countSliderTwo*widthSliderTwo+'px)'

}

function init(slider){
  widthSliderTwo=document.querySelector('.slider').offsetWidth
  let next=slider.querySelector('.next')
  let prev=slider.querySelector('.prev')
  next.onclick=()=>{
    if(countSliderTwo==2){
      countSliderTwo=0
    }else{countSliderTwo++};
    rollSliderTwo()
  }
  prev.onclick=()=>{
    if(countSliderTwo==0){
      countSliderTwo=2
    }else{countSliderTwo--}
    rollSliderTwo()

  }
}