Как сделать чтобы при выделенной ссылке отображался конкретный слайдер

var slider1 = document.getElementsByClassName('slider1')[0]; 
var slider2 = document.getElementsByClassName('slider2')[0]; 
var slider3 = document.getElementsByClassName('slider3')[0]; 
 
function slider(count) { 
  if (count == 1) { 
    slider1.style.display = "block"; 
    slider2.style.display = "none"; 
    slider3.style.display = "none"; 
  } else if (count == 2) { 
    slider1.style.display = "none"; 
    slider2.style.display = "block"; 
    slider3.style.display = "none"; 
  } else if (count == 3) { 
    slider1.style.display = "none"; 
    slider2.style.display = "none"; 
    slider3.style.display = "block"; 
  } 
}

ul { 
  list-style: none; 
  width: 100%; 
  height: 30px; 
} 
ul li { 
  float: left; 
  width: 33%; 
  height: 100%; 
} 
ul li a { 
  display: block; 
  width: 100%; 
  height: 100%; 
  font-size: 20px; 
  text-align: center; 
  line-height: 30px; 
  text-decoration: none; 
  color: #444; 
  transition: .2s; 
} 
ul li a:hover { 
  background: #aaa; 
} 
.carusel { 
  display: none; 
  width: 100%; 
  height: 200px; 
  background: #333; 
  color: #fff; 
}

<ul class="links"> 
  <li><a href="#" onclick="slider(1);">link1</a></li> 
  <li><a href="#" onclick="slider(2);">link2</a></li> 
  <li><a href="#" onclick="slider(3);">link3</a></li> 
</ul> 
 
<div class="slider1 carusel">Slider1</div> 
<div class="slider2 carusel">Slider2</div> 
<div class="slider3 carusel">Slider3</div>

const carusel = document.getElementsByClassName('carusel'); 
const a = document.getElementsByTagName('a'); 
 
for (let i = 0; i < a.length; i++) { 
  a[i].addEventListener('click', function() { 
    for (let i = 0; i < a.length; i++) { 
      carusel[i].style.opacity = '0'; 
    } 
    carusel[i].style.opacity = '1'; 
  }) 
}

ul { 
  list-style: none; 
  width: 100%; 
  height: 30px; 
} 
 
ul li { 
  float: left; 
  width: 33%; 
  height: 100%; 
} 
 
ul li a { 
  display: block; 
  width: 100%; 
  height: 100%; 
  font-size: 20px; 
  text-align: center; 
  line-height: 30px; 
  text-decoration: none; 
  color: #444; 
  transition: background .2s; 
} 
 
ul li a:hover { 
  background: #aaa; 
} 
 
.caruselWrap { 
  position: relative; 
  width: 100%; 
  height: 200px; 
  border: 1px solid red; 
} 
 
.carusel { 
  position: absolute; 
  opacity: 0; 
  width: 100%; 
  height: 100%; 
  background: #333; 
  color: #fff; 
  transition: opacity .2s; 
}

<ul class="links"> 
  <li><a href="#">link1</a></li> 
  <li><a href="#">link2</a></li> 
  <li><a href="#">link3</a></li> 
</ul> 
<div class="caruselWrap"> 
  <div class="carusel">Slider1</div> 
  <div class="carusel">Slider2</div> 
  <div class="carusel">Slider3</div> 
</div>