1.1.10 • Published 1 year ago

@samrahnama/triple-state-slider v1.1.10

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
1 year ago

build status codecov

vue triple state slider

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

preview

for helping to update this library after forking the repo, try to run npm run dev. triple-state-slider-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.component('Slider',TripleStateSlider)

inside template:

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

inside script:

<script setup lang="ts">
import type Slide from "@samrahnama/triple-state-slider/dist/types/Slide";

const sliderImages: Slide = [
        {
            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

namerequiredtypedefaultdescription
slidesyesarray-the slides is an array of objects, the image property of object is the src of the each slide.
intervalnonumber5000this is a timer for auto sliding, default : 5000ms
containerClassnostring-you can use this prop to set container class of slider.
showButtons( soon)nobooleanfalsehides/shows next and previous buttons.
infinitenobooleantruewhen its true slider doesn't stop.
1.1.9

1 year ago

1.1.6

1 year ago

1.1.10

1 year ago

1.1.0

2 years ago

1.0.0

2 years ago

1.1.5

2 years ago

1.1.4

2 years ago

0.1.1

2 years ago

0.1.0

3 years ago

0.0.8

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.1

3 years ago

0.0.0

3 years ago