JSFiddle - React, Tailwind, and code Playground

by id0

HTML

<div id="app">
  <div class="slider">
    <div class="slider-inner" ref="sliderInner" :style="{left: scrollPosition}">
      <div class="slide" v-for="n in slides">{{n}}</div>
    </div>
  </div>
  <button class="button" type="button" @click="scroll(-1)"><=</button>
  <button class="button" type="button" @click="scroll(+1)">=></button>
  <div>
    scrollPosition: {{scrollPosition}}
  </div>
</div>

SCSS

.b-slider__outer {
  position: relative;
}
.slider {
  overflow: hidden;
  width: 488px;
}
.slider-inner {
  position: relative;
  display: flex;
}
.slide {
  flex: 0 0 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120px;
  border: solid 1px red;
}
.button {
  font-family: monospace;
}

Vue

new Vue({
  el: "#app",
  data: () => ({
 	  slides: 10,
    slide: 0,
    scrollPosition: '',
    direction: null,
    date: Date.now(),
  }),
  methods: {
    scroll(adjust) {
      this.direction = adjust > 0 ? 'right' : 'left';
      let newSlide = this.slide;
      newSlide += adjust;
      if (newSlide >= this.slides) {
        newSlide = 0;
      } else if (newSlide < 0) {
        newSlide = this.slides - 1;
      }
      this.slide = newSlide;
      const sliderInnerW = 488;
      let scrollPosition = this.slide * sliderInnerW / 4 * -1;
      this.scrollPosition = `${scrollPosition}px`;
      this.date = Date.now();
    },
  },
})