import './demo20.css';
import React from 'react';
import ReactDOM from 'react-dom';
import Slider from '..';

const settings = {
  className: 'custom-slide',
  // arrowPosition: 'outer',
  dots: false,
  infinite: true,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1,
  onChange(index) {
    console.log('change Slide index', index);
  },
};

ReactDOM.render(
  <Slider {...settings} arrowPosition='outer'>
    <div>
      <h3>1</h3>
    </div>
    <div>
      <h3>2</h3>
    </div>
    <div>
      <h3>3</h3>
    </div>
    <div>
      <h3>4</h3>
    </div>
    <div>
      <h3>5</h3>
    </div>
    <div>
      <h3>6</h3>
    </div>
    <div>
      <h3>7</h3>
    </div>
    <div>
      <h3>8</h3>
    </div>
    <div>
      <h3>9</h3>
    </div>
  </Slider>,
  document.getElementById('slider-demo-20'),
);