vue-easy-slider

by Asif Sharif Shahid

HTML

<script src="https://cdn.rawgit.com/shhdgit/vue-easy-slider/3.0.0/dist/index.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<div id="slider">
  <slider animation="fade">
    <p style="line-height: 280px; font-size: 5rem; text-align: center;" v-if="!list.length">Loading...</p>
    <slider-item v-for="(i, index) in list" :key="index" :on-click="test">
      <div :style="i">
        <p style="line-height: 280px; font-size: 5rem; text-align: center;">Page{{ index + 1 }}</p>
      </div>
    </slider-item>
  </slider>
</div>

CSS

p {
  margin: 0;
}

JavaScript

new Vue( {
  el: '#slider',
  data () {
    return {
      list: [],
    }
  },

  methods: {
    test () {console.log(1)}
  },

  mounted () {
    setTimeout(() => {
      this.list = [
        { backgroundColor: '#3f51b5', width: '100%', height: '100%' },
        { backgroundColor: '#eee', width: '100%', height: '100%' },
        { backgroundColor: '#f44336', width: '100%', height: '100%' },
      ]
    }, 1000)
  },

  components: {
    'Slider': window[ 'vue-easy-slider' ].Slider,
    'SliderItem': window[ 'vue-easy-slider' ].SliderItem
  }
} )