<div class="slider">
  <ul class="nav">
    <li><a href="#">Music</a></li>
    <li><a href="#">Guns</a></li>
    <li><a href="#">Alcolhol</a></li>
  </ul>
  
  <div class="container">
    <div class="slides">
      <div class="slide">Music</div>
      <div class="slide">Guns</div>
      <div class="slide">Alcolhol</div>
    </div>
  </div>
</div>

.container {
  position: relative;
  overflow: hidden;
}


.container,
.slide {
  width: 400px;
  height: 200px;  
}

.slides {
  position: absolute;
  display: flex;
  transition: transform .2s ease;
}

.slide:nth-child(1) {
  background-color: purple;
}

.slide:nth-child(2) {
  background-color: red;
}

.slide:nth-child(3) {
  background-color: blue;
}

const slider = document.querySelector('.slider')
const navItems = slider.querySelectorAll('.nav li')
const container = slider.querySelector('.container')
const slides = container.querySelector('.slides')

Array.from(navItems).forEach((item, index) => {
  item.addEventListener('click', event => {
    const { width } = container.getBoundingClientRect()
    
    slides.style.transform = `translateX(${-index * width}px)`
    event.preventDefault()
  })
})