JSPM

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

const App = () => {
  return (
    <Sled>
      // 'ow' is percent of the sled's own width. So the ratio is 2:1.
      <Views height="50ow">
        <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
// does not take any props
/>

<Views
  width
  // Type: String. Default: '100%'
  // Optional. Sets the viewpager’s width.
  // Allowed units:
  // – all CSS-units
  // – 'ow' ("own width": percent of viewpager’s width)
  height
  // Type: String. Default: "50vh"
  // Set the viewpager’s height.
  // Allowed units:
  // – all CSS-units
  // – 'ow' ("own width": percent of viewpager’s width)
  goto
  // Type: Number. Default: undefined
  // Got to view.
  style
  // Type: String. Default: ''
  // Optional. Add styles to the view-wrapper (via styled-components template-string).
  keyboard
  // Type: Boolean. Default: true
  // Keyboard controls.
  dragging
  // Type: Boolean. Default: true
  // Mouse- and Touch-Dragging.
  dragDistance
  // Type: String. Default: 25ow
  // Distance, the user has to drag the slider to trigger action.
  autoPlay
  // Type: Number. Default: undefined
  // Activates automatic Sliding.
  // Time in Milliseconds
  config
  // Type: Object. Default: { mass: 1, tension: 210, friction: 20, clamp: true }
  // react-spring animation-settings.
  pauseOnMouseOver
  // Type: Boolean. Default: true
  // autoPlay (if activated) gets paused, as long as the User hovers over the sled.
  rewind
  // Type: Boolean. Default: false
  // Rewind sled, when you want to go beyond the first or last view.
/>

<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.