Skip to content
This repository has been archived by the owner on Oct 7, 2020. It is now read-only.
/ jquery-tinyslide Public archive

Transfer multiple elements into slide in one magic.

License

Notifications You must be signed in to change notification settings

polydice/jquery-tinyslide

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

jquery-tinyslide

npm version

Transfer multiple elements into slide in one magic.

Install

npm install --save jquery-tinyslide

or

bower install --save jquery-tinyslide

Dependency

Since this package acts as a jQuery extension, it depends on jQuery. Be sure that you have jQuery installed properly before requiring it.

Usage

if you install it with npm, you can just:

require('jquery-tinyslide');

otherwise you could require your own asset management tool(ex. sprocket) if you install it with bower.

tinyslide now should work as expected as a jQuery extension!

Now we can register DOM element which we would like it be a slide.

$(MYSLIDE).tinySlide({
  title: 'li',
  interval: 4000,
  $pause: $(SLIDE).find('li'),
  onPause(pos) {
    return changepic(pos);
  },
  onRotate(pos) {
    return changepic(pos);
  },
});

this block above will turn all li element in MYSLIDE element to have slide bebaviour and attribute.

options will be introduced in next section.

Options

startIdx number (default: 0)

Beginning index of toggled elements.

interval number (default: 2000)

Interval time from one to the next.

title string (default: 'li')

Element type of slide to be toggled.

activeClass string (default: 'current')

Class you want to attach when element is active.

$pause DOM Element (default: null)

Set the controll element for controlling lifecycle of the slide. Pause when mouseenter event is triggered, and restart when mouseleave evnet is triggered,

onPause(position) function

It will be triggered when slide pause.

onRestart(position) function

It will be triggered when slide restart.

onRotate(position) function

It will be triggered when slide finish one rotate.

Test

npm test

Demo

Check our simple sample.

Contribute

PR, issue and advice are always welcome.

Lisence

Check lisence here.