Simple 3 Item Carousel

by Trevin Avery

HTML

<div class="container">
  <div class="slider">
    <div style="background:red"></div>
    <div style="background:blue"></div>
    <div style="background:green"></div>
    <div style="background:orange"></div>
    <div style="background:grey"></div>
    <div style="background:magenta"></div>
    <div style="background:purple"></div>
  </div>
</div>

<button id="prev">Prev</button>
<button id="next">Next</button>

CSS

.container {
  width: 100%;
  overflow: hidden;
}

.slider {
  width: 100%;
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slider > div {
  flex: 0 0 calc(100% / 3);
  height: 20px;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
	let slider = document.querySelector('.slider')
	let next = document.querySelector('#next')
  let prev = document.querySelector('#prev')
  
  let offset = 0
  
  function slide(shift) {
  	offset += shift
    offset = Math.max(0, Math.min(slider.children.length - 1, offset))
  	slider.style.transform = `translateX(calc(-${offset} * 100% / 3))`
  }
  
  next.addEventListener('click', function() {
  	slide(1)
  })
  
  prev.addEventListener('click', function() {
  	slide(-1)
  })
})