JSPM

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

const images = ["my-image-1.jpg", "my-image-2.jpg"];

const App = () => {
  return (
    <Sled>
      // 'ow' is percent of the sled's own width. So the ratio is 2:1.
      <Views height="50ow">
        {images.map(image => (
          <img src={image} alt="My Image" />
        ))}
      </Views>
      <Progress />
      <div className="controls arrows">
        <Control goto="prev" />
        <Control goto="next">Go to next view!</Control>
      </div>
      <div className="controls dots">
        {images.map((null, index) => (
          <Control goto={index} />
        ))}
      </div>
    </Sled>
  );
};

export default App;

<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: Number or String. Default: 40 (px)
  // Distance the user has to drag the slider to trigger action.
  // A number is calculated in Pixel. A string has to have the custom unit 'ow' (own width of the sled).
  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.
/>

<Control
  goto
  // Type: String or Number.
  // Default: 'next'
  // Number is index of the target-view.
  // Possible values string: 'prev', 'next'

  preset
  // Type: String.
  // Default: ''.
  // If you provide a preset, the default gets replaced.

  style
  // Type: String.
  // Default: ''
  // If you provide a style, the default preset gets replaced.

// Dot with extended default preset
<Control
  goto={1}
  preset='dot'
  style={`
    background: red;
  `}
/>

// Arrow with custom content
<Control
  goto="next"
  style={`
    background: red;
  `}
>
  Go to next view!
</Control>

<Progress
  style={`
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    height: 20px;

    .sled-progress-rail {
      background: black;
      height: 4px;
    }
    .sled-progress-track {
      background: red;
      height: 4px;
    }
    .sled-progress-separator {
      width: 4px;
      background: white;
    }
  `}
/>