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,orstring( '.slide-v' )|Slide-v creating additional "movingElem" insidethe "container" and placing child elements of "container" inside to "movingElem".Default: exampleDOM element: exampleString: 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 initializationstage. 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 9Chrome 9Safari 5.1Opera 12FireFox 6