slide-v

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
• Using
• Configuration
• API
• Features
• Browser support

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
• prev
• goTo
• getState
• prepend
• append
• insert
• remove
• destroy

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