Javascript Vue

A vue triple state slider: previous, current, next1 min read

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

Leave a Reply

Your email address will not be published.

Pin It on Pinterest