const props = {
  images: [
    {
      src: 'https://picsum.photos/300/200?1',
      alt: 'Some Text',
      link: 'https://picsum.photos/300/200?1'
    },
    {
      src: 'https://picsum.photos/300/200?2',
      alt: 'Text B'
    },
    {
      src: 'https://picsum.photos/300/200?3'
    },
    {
      src: 'https://picsum.photos/300/200?4',
      alt: 'Text D'
    },
    {
      src: 'https://picsum.photos/300/200?5',
      alt: 'Text E',
      link: 'https://picsum.photos/400/300/?random',
      key: 'https://picsum.photos/300/200?5'
    },
    {
      src: 'https://picsum.photos/300/200?6',
      alt: 'Text F',
      link: 'https://picsum.photos/400/300/?random',
      key: 'https://picsum.photos/300/200?6'
    },
    {
      src: 'https://picsum.photos/300/200?7',
      alt: 'Text G'
    },
    {
      src: 'https://picsum.photos/300/200?8',
      alt: 'Text G'
    },
    {
      src: 'https://picsum.photos/300/200?9',
      alt: 'Text G'
    },
    {
      src: 'https://picsum.photos/300/200?1',
      alt: 'Some Text',
      link: 'https://picsum.photos/300/200?1'
    },
    {
      src: 'https://picsum.photos/300/200?2',
      alt: 'Text B'
    },
    {
      src: 'https://picsum.photos/300/200?3'
    },
    {
      src: 'https://picsum.photos/300/200?4',
      alt: 'Text D'
    },
    {
      src: 'https://picsum.photos/300/200?5',
      alt: 'Text E',
      link: 'https://picsum.photos/400/300/?random',
      key: 'https://picsum.photos/300/200?5'
    },
    {
      src: 'https://picsum.photos/300/200?6',
      alt: 'Text F',
      link: 'https://picsum.photos/400/300/?random',
      key: 'https://picsum.photos/300/200?6'
    },
    {
      src: 'https://picsum.photos/300/200?7',
      alt: 'Text G'
    },
    {
      src: 'https://picsum.photos/300/200?8',
      alt: 'Text G'
    },
    {
      src: 'https://picsum.photos/300/200?9',
      alt: 'Text G'
    },
    {
      src: 'https://picsum.photos/300/200?1',
      alt: 'Some Text',
      link: 'https://picsum.photos/300/200?1'
    },
    {
      src: 'https://picsum.photos/300/200?2',
      alt: 'Text B'
    }
  ],
  sliderOptions: { doAfterSlide: () => {console.log('You should be able to see this message while image counter still works')}}
}

return (
  <div style={{width: '400', maxWidth: '100%'}} >
    <h2>Slider without counter</h2>
    <ImageSlider { ...props } />
    <br />
    <h2>Slider with counter on the left</h2>
    <ImageSlider { ...props } enableCounter />
    <br />
    <h2>Slider with counter on the center and custom counter factory</h2>
    <ImageSlider { ...props } counterPatternFactory={({current, total}) => `${current}-${total}`} enableCounter counterPosition='bottomCenter' />
    <br />
    <h2>Slider with counter on the right</h2>
    <ImageSlider { ...props } enableCounter counterPosition='bottomRight' />
  </div>
)
