Horizontal scroller. "Kinda" reactive.

scroller.js

const store = {
  _state: 0,
  max: Infinity,
  min: 0,
  _listeners: [],
  set listeners(fn) {
    this._listeners.push(fn);
  },
  get current() {
    return this._state;
  },
  set current(n) {
    if (n <= this.max && n >= this.min) {
      this._state = n;
      this.dispatch();
    }
  },
  dispatch() {
    this._listeners.forEach(fn => fn(this._state));
  }
};

const increment = (state) => state + 1;
const decrement = (state) => state - 1;

window.App = {
  run(listener) {
    if (typeof listener === 'function') {
      store.listeners = listener;
    }

    store.max = 3;
  },
  next() {
    store.current = increment(store.current);
    return store.current;
  },
  previous() {
    store.current = decrement(store.current);
    return store.current;
  },
  current() {
    return store.current;
  }
};

const scroll = (steps) => `translate(-${steps * 100}vw, 0)`;

const init = () => {
  const $container = $('.scroller');

  window.App.run((state) => {
    $container.css({
      transform: scroll(state)
    });
  });
};

document.addEventListener('DOMContentLoaded', init, false);