JSPM

import React from "react";
import { Sled, Views, Progress, Control } from "react-sled";

const App = () => {
  return (
    <Sled wrapperHeight="50ow">
      <Views>
        <img src="my-image-1.jpg" alt="My Image" />
        <img src="my-image-2.jpg" alt="My Image" />
      </Views>
      <Progress />
      <div className="controls">
        <Control type="prev" />
        <Control type="next" />
      </div>
    </Sled>
  );
};

export default App;

<Sled
  wrapperWidth
  // Type: Number. Default: undefined
  // Optional. Sets the viewpager’s width.
  wrapperHeight
  // Type: Number or String. Default: "50%"
  // Set the viewpager’s height. A number is pixels.
  // Allowed units: ol ("own width": percent of viewpager’s width), vw, vh, rem, em, px
  auto
  // Type: Number. Default: undefined
  // Activates automatic Sliding.
  // Time in Milliseconds
  config
  // Type: Object. Default: { mass: 1, tension: 210, friction: 20, clamp: true }
  // Animation settings.
  keys
  // Type: Boolean. Default: true
  // Keyboard controls.
  dragDistance
  // Type: String. Default: 25ow
  // Distance, the user has to drag the slider to trigger action.
/>

<Progress
  style
  // Type: String.
  // Default: `
  //   height: 4px;
  //   background: black;
  //   margin: 10px 0;

  //   .viewpager-progress-bar {
  //     background: red;
  //   }
  //   .viewpager-progress-separator {
  //     width: 4px;
  //     background: white;
  //   }
  // `
/>

<Control
  type
  // Type: String.
  // Default: 'next'
  // Possible values: 'prev', 'next'

  style
  // Type: String.
  // Default: `
  //  cursor: pointer;
  //  padding: 10px;
  //  width: 40px;
  //  height: 40px;
  //`
  // If you provide a style, the default gets deleted.