import '../assets/index.less';
import Slider from '../src/slider';

const CustomSlide = {
  props: ['index'],
  render() {
    return (
      <div>
        <h3>{this.index}</h3>
      </div>
    );
  },
};

export default {
  render() {
    const settings = {
      props: {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
      },
    };
    return (
      <div>
        <h2>Custom Slides</h2>
        <Slider {...settings}>
          <CustomSlide index={1} />
          <CustomSlide index={2} />
          <CustomSlide index={3} />
          <CustomSlide index={4} />
          <CustomSlide index={5} />
          <CustomSlide index={6} />
        </Slider>
      </div>
    );
  },
};