Generated by XState Viz: https://xstate.js.org/viz

machine.js

const wrapper = document.createElement('div');
  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const fetchMachine = Machine({
    id: 'carousel',
    initial: 'idle',
    context: {
      retries: 0
    },
    states: {
      idle: {
        on: {
          mousedown: 'dragging'
        }
      },
      dragging: {
        on: {
          mouseup: 'seeking',
        }
      },
      seeking: {
        on: {
          arrive: 'idle',
          mousedown: 'dragging'
        }
      }
      // failure: {
      //   on: {
      //     RETRY: {
      //       target: 'loading',
      //       actions: assign({
      //         retries: (context, event) => context.retries + 1
      //       })
      //     }
      //   }
      // }
    }
  });
  
  const createWrapper = () => {
    let el = document
    .createElement('div');
    el
    .setAttribute(
      'style',
      'display:block; idth: 100px; height: 100px; background-color: blue;'  
    );
    el.setAttribute('id', 'car')
    return el;
  }
  const createItem = num => {
    const item = document.createElement('div');
    item.setAttribute(
      'style',
      'width: 10px; height: 10px; background-color: green;'  
    )
    return item;
  }
  
  
  const carousel = document.getElementById('car') || createWrapper();
  carousel.innerHTML = '';
  
  const items  = [1,2].map(createItem);
  items.forEach(item => {
    carousel.appendChild(item);
  })
  document.body.appendChild(carousel)