vue-imageslider

This package is a custom image slider for vue (>= 2). Slider contains some customizable props: rounded corners, indicators, auto-slide, custom slide interval, custom background, looping and more. Width and height is set to 100% of given parent -- meaning that the size restrictions are up to you.

Package setup

Install package via npm

npm i @macamp34/vue-imageslider

Include package into your Vue file and register it in components

import ImageSlider from '@macamp34/vue-imageslider';
...
..
.
components: {
    ImageSlider
},

Now you can use:

<image-slider></image-slider>

tags with these props:

props: {
    images: {
        type: Array,
        required: true
    },
    newPage: {
        type: Boolean,
        required: false
    },
    sliderRadius: {
        type: Number,
        required: false
    },
    imagesRadius: {
        type: Number,
        required: false
    },
    background: {
        type: String,
        required: true
    },
    showIndicator: {
        type: Boolean,
        required: true
    },
    sliderInterval: {
        type: Number,
        required: false
    },
    sliderBehavior: {
        type: String,
        required: true
    },
    autoSlide: {
        type: Boolean,
        required: true
    }   
}

Example usage

<template>
  <div id="app">
    <image-slider :images="images" :background="'#101010'" :sliderRadius="10" :sliderBehavior="'smooth'" :showIndicator="true"></image-slider>
  </div>
</template>

<script>
import ImageSlider from '@macamp34/vue-imageslider'
export default {
  name: 'App',
  components: {
    ImageSlider
  },
  data(){
    return {
      images: [
        {
          path: 'https://cdn.pixabay.com/photo/2021/08/24/15/38/sand-6570980_960_720.jpg'
        },
        { 
          path: 'https://cdn.pixabay.com/photo/2021/08/04/16/36/sunflower-6522150_960_720.jpg'
        },
        { 
          path: 'https://cdn.pixabay.com/photo/2020/12/22/16/30/art-5852645_960_720.jpg'
        },
        { 
          path: 'https://cdn.pixabay.com/photo/2021/08/21/21/10/animal-6563620_960_720.jpg'
        },
        { 
          path: 'https://cdn.pixabay.com/photo/2021/08/23/11/06/nature-6567542_960_720.jpg'
        },
        { 
          path: 'https://cdn.pixabay.com/photo/2021/08/22/15/39/kid-6565461_960_720.jpg'
        },
        { 
          path: 'https://cdn.pixabay.com/photo/2021/06/22/14/55/girl-6356393_960_720.jpg'
        }
      ]
    }
  }
}
</script>

<style>
  *{
    margin: 0;
    padding: 0;
  }
  #app {
    padding: 1rem;
    height: 600px;

  }
</style>