A vue triple state slider: previous, current, next

vue triple state slider

well this is slider that shows three states: previous, current and next slides.

preview

install via npm

npm i @samrahnama/triple-state-slider

import slider component

import {createApp} from 'vue'
import TripleStateSlider from '@samrahnama/triple-state-slider'
import "@samrahnama/triple-state-slider/dist/main.css"


const app = createApp(App)
app.use(TripleStateSlider)

inside template:

<triple-state-slider :slides="sliderImages"/>

inside script:

<script setup>
    const sliderImages = [
        {
            order: 1,
            image: 'https://picsum.photos/1280/720?random=1',
            title: 'just a title',
        },
        {
            order: 2,
            image: 'https://picsum.photos/1280/720?random=2',
            title: 'just a title',
        },
        {
            order: 3,
            image: 'https://picsum.photos/1280/720?random=3',
            title: 'just a title',
        },
        {
            order: 4,
            image: 'https://picsum.photos/1280/720?random=4',
            title: 'just a title',
        },
        {
            order: 5,
            image: 'https://picsum.photos/1280/720?random=5',
            title: 'just a title',
        },
        {
            order: 6,
            image: 'https://picsum.photos/1280/720?random=6',
            title: 'just a title',
        }, 
    ]
</script>

props

name required type default description
slides yes array the slides is an array of objects, the image property of object is the src of the each slide.
interval no number 5000 this is a timer for auto sliding, default : 5000ms
containerClass no string you can use this prop to set container class of slider.
showButtons(soon) no boolean false hides/shows next and previous buttons.
infinite no boolean true when its true slider doesn’t stop.

GitHub

View Github