Miss any of our Open RFC calls?Watch the recordings here! »

slide-v

2.0.0 • Public • Published

Slide-V - classic carousel

Slide-V provides basic functionality to easy using and opportunity adding new features through API. In the carousel implemented API buffer, drag & drop, adaptive structure. Not used frameworks, dependencies and external styles.

size: 4kb (gzip)

Installing

Place script to HTML

<script src="slide-v.min.js"></script>

global variable:

SlideV

Use module system

import SlideV from 'slide-v';

or

const SlideV = require('slide-v');

Using

Slide-V use your DOM structure:

<div class="container">
    <div> slide 0 </div>
    <div> slide 1 </div>
    <div> slide 2 </div>
</div>

init:

<script>
    new SlideV({
      containerSelector: '.container'
    })
</script>

Configuration

new SlideV({
    containerSelector: '.container',
    slidesInFrame: 1,
    step: slidesInFrame,
    transitionDuration: 300,
    transitionTiming: 'ease',
    draggable: true,
    dragThreshold: 0.2,
    loop: false,
    slideElemClass: 'class-name',
    onMoveEnd: () => {},
    onSlideClick: ({ slide, target }) => {},
})
property type
(default)
description
containerSelector DOM element,
or
string

( '.slide-v' )
Slide-v creating additional "movingElem" inside
the "container" and placing child elements of
"container" inside to "movingElem".

Default: example
DOM element: example
String: example
slidesInFrame number
(1)
Number of slides displayed in frame of "container".
example
step number
(slidesInFrame)
Number of moving slides per one step. example
transitionDuration number
(300)
Time at milliseconds during which carousel moving.
example
transitionTiming string
('ease')
The transition-timing-function property specifies
the speed curve of the transition effect. example
draggable boolean
(true)
Enable or disable "Drag'n'Drop". example
dragThreshold number
(0.2)
The shift value at which the step is activated.
Available values from 0 to 1. example
loop boolean
(false)
Enable or disable infinite loop. example
slideElemClass string Adding class to slide elements on the initialization
stage. This class will be add to slide elements which
was added to carousel through API. example
onMoveEnd function Event handler of ending moving. example
onSlideClick function Event handler of mouse click on slide.
Slide & target elements passing to parameters of function.
example

API

next

next ( { step: number, isAnimated = boolean, callback: function } )
parameter type default required parameter
step number slidesInFrame no
isAnimated boolean true no
callback function - no

next()
Moving slides one step to left. If carousel moved to the end position then carousel will not moving on at this direction. example

next({ step: number })
Moving slides one step to left with specified "step". example

next({ isAnimated: boolean })
On/off animation of moving. If animation is off then event "onMoveEnd" do not fired. example

next({ callback: function })
"Callback" function called asynchronously at the end of animation after event "onMoveEnd". If "isAnimated = false" or carousel at the end position then "callback" function will be call in sync at the end of "next" API method. example

prev

prev ( { step: number, isAnimated: boolean, callback: function } )
parameter type default required parameter
step number slidesInFrame no
isAnimated boolean true no
callback function - no

prev()
Moving slides one step to right. If carousel moved to the end position then carousel will not moving on at this direction. example

prev({ step: number })
Moving slides one step to right with specified "step". example

prev({ isAnimated: boolean })
On/off animation of moving. If animation is off then event "onMoveEnd" do not fired. example

prev({ callback: function })
"Callback" function called asynchronously at the end of animation after event "onMoveEnd". If "isAnimated = false" or carousel at the end position then "callback" function will be call in sync at the end of "prev" API method. example

goTo

goTo ( index: number, { isAnimated: boolean, callback: function }  )
parameter type default required parameter
index number 0 no
isAnimated boolean true no
callback function - no

goTo(index)
Moving carousel to position with specified "index". if "index" more/less of available value then carousel moving to end/start position. example

goTo({ isAnimated })
On/off animation of moving. If animation is off then event "onMoveEnd" do not fired. example

goTo({ callback })
"Callback" function called asynchronously at the end of animation after event "onMoveEnd". If "isAnimated = false" or carousel at the end position then "callback" function will be call in sync at the end of "goTo" API method. example

getState

getState()

Returns object with current position of the carousel. example

Object {
  currentSlideIndex: number,
  lastSlideIndex: number,
  numberSlidesAfterFrame: number
}

NOTICE: "getState" does not returns "slide-v" object. Do not use "getState" for chaining:

new SlideV().getState().next()

prepend

prepend( newElem, { callback: function } )
parameter type default required parameter
newElem DOM element - yes
callback function - no

prepend(newElem)
Adding new element to beginning of carousel. This parameter is required. example

prepend(newElem, { callback: function })
"Callback" function called in sync at the end of "prepend" method. example

append

append( newElem, { callback: function } )
parameter type default required parameter
newElem DOM element - yes
callback function - no

append(newElem)
Adding new element to end of carousel. This parameter is required. example

append(newElem, { callback: function })
"Callback" function called in sync at the end of "append" method. example

insert

insert( newElem, index, { callback: function } )
parameter type default required parameter
newElem DOM element - yes
index number - yes
callback function - no

insert(newElem, index)
Adding new element before the element with specified "index". If element with specified "index" is not exist then new element will not add. Both parameter is required. example

insert(newElem, index, { callback: function })
"Callback" function called in sync at the end of "insert" method. example

remove

remove( index, { callback: function } )
parameter type default required parameter
index number - yes
callback function - no

remove(index)
Removing element with specified "index". This parameter is required. example

remove(index, { callback: function })
"Callback" function called in sync at the end of "remove" method. The removed element passing to parameters of callback function. example

destroy

destroy( { initialMarkup: boolean, callback: function } )
parameter type default required parameter
initialMarkup boolean false no
callback function - no

destroy()
Removing all event listeners. After called "destroy" all methods of API (exception getState) will be not available. example

destroy({ initialMarkup })
Removing all event listeners and return "DOM structure" to initial state. example

destroy({ callback })
"Callback" function called in sync at the end of "destroy" method. example

Features

Buffer

  • All API placed to buffer will be call in order of queue. example

  • API which was passed with "callback" function will be call in order relative to each other. example

Dynamic adaptive structure

Follow the link and change window width of browser.

Browser support

IE 9
Chrome 9
Safari 5.1
Opera 12
FireFox 6

Install

npm i slide-v

DownloadsWeekly Downloads

13

Version

2.0.0

License

ISC

Unpacked Size

35.9 kB

Total Files

4

Last publish

Collaborators

  • avatar