Skip to content

dreambo8563/vue-piece-slider

Repository files navigation

vue-piece-slider (Demo)

Codacy Badge All Contributors Greenkeeper badge Build Status Known Vulnerabilities License: MIT npm

This library is a simplified Vue portal of an awesome Codrops Article by Luis Manuel (original source).

In this version, just support image type.

Install

npm install --save animejs vue-piece-slider

Usage

Check out the Demo to see it in action.

<template>
  <div class="content" id="app">
    <Slider
      :arrow="true"
      :options="options"
      @click="click"
      class="slider"
      :list="list"
      v-model="activeIndex"
    ></Slider>
  </div>
</template>

<script>
import Slider from "vue-piece-slider"

export default {
  name: "app",
  data() {
    return {
      activeIndex: 0,
      list: [
        "./img/1.jpg",
        "./img/2.jpg",
        "./img/3.jpg",
        "./img/4.jpg",
        "./img/5.jpg"
      ],
      options: {
        angle: 30,
        extraSpacing: { extraX: 1, extraY: -20 },
        piecesWidth: 100,
        ty: 200,
        piecesSpacing: 1,
        animation: {
          duration: 2000,
          easing: "easeOutQuint"
        }
      }
    }
  },
  components: {
    Slider
  },
  methods: {
    click() {
      // eslint-disable-next-line no-console
      console.info("object")
    }
  }
}
</script>

<style lang="scss">
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  .slider {
    width: 400px;
    height: 200px;
  }
}
</style>

Props

Property Type Default Description
list Array [] The image list
value Number |String 0 The activeIndex
arrow Booleans true if to show the action arrow when hover

Options

Property Type Default Description
angle Number 45 Rotation angle for pieces. All pieces in the same item will have the same rotation angle.
extraSpacing Object { extraX: 500, extraY: 200 } Extra space that should be covered by the pieces. You can set a different value for each axis using an Object like: {extraX: 0, extraY: 0}. This is useful if angle != 0.
piecesWidth Func |Number random(50, 200) Pieces width.
piecesSpacing Func |Number 5 Separation among pieces.

more params please follow the package of Piece

Credits

Contributors

Thanks goes to these wonderful people (emoji key):

Vincent Guo
Vincent Guo

πŸ’» πŸ“– πŸš‡

This project follows the all-contributors specification. Contributions of any kind welcome!