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

export default {
  data () {
    return {
      slides: [1, 2, 3, 4, 5, 6],
    }
  },
  methods: {
    click () {
      this.slides = this.slides.length === 6 ? [1, 2, 3, 4, 5, 6, 7, 8, 9] : [1, 2, 3, 4, 5, 6]
    },
  },
  render () {
    const settings = {
      props: {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 3,
        slidesToScroll: 3,
      },
    }
    return (
      <div>
        <h2>Dynamic slides</h2>
        <button class='button' onClick={this.click}>
          Click to change slide count
        </button>
        <Slider {...settings}>
          {this.slides.map(function (slide) {
            return (
              <div key={slide}>
                <h3>{slide}</h3>
              </div>
            )
          })}
        </Slider>
      </div>
    )
  },
}