https://github.com/ipluser/jquery-shifter

Simple and lightweight shift/slide plugin for jquery(less than 1kb).
https://github.com/ipluser/jquery-shifter

gallery jquery jquery-plugin jquery-shifter roller slider

Last synced: 3 days ago
JSON representation

Simple and lightweight shift/slide plugin for jquery(less than 1kb).

• Host: GitHub
• URL: https://github.com/ipluser/jquery-shifter
• Owner: ipluser
• License: mit
• Created: 2015-11-08T02:05:21.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2016-07-10T13:00:39.000Z (over 8 years ago)
• Last Synced: 2024-04-24T08:29:03.109Z (7 months ago)
• Topics: gallery, jquery, jquery-plugin, jquery-shifter, roller, slider
• Language: JavaScript
• Homepage: http://ipluser.github.io/jquery-shifter/
• Size: 3.04 MB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## jquery-shifter

Simple and lightweight shift/slide plugin for jquery(less than 1kb).

![jquery-shifter-samples](public/img/samples.gif)

## Resources

- [online example](http://ipluser.github.io/jquery-shifter/)

## How to use

### Installing

```

bower install jquery-shifter

```

or

```

npm install jquery-shifter

```

### Include jquery, jquery-shifter and css

```html

```

### Ready your HTML

```html



  


    


    


    


    


    


    


    


    


    


  



```


### Plug it all together

```javascript

$(function() {

  $('.shifter').shifter();

});

```

## Options

```javascript

  $('.shifter').shifter({

    forwardText: 'left',    // Text for the "forward" button, default is "forward"

    backwardText: 'right',  // Text for the "backward" button, default is "backward"

    forwardSelector: '#forwardArrow',   // Declare selector of "forward" button 

    backwardSelector: '#backwardArrow', // Declare selector of "backward" button

    switcher: true, // Whether navigator auto to switch

    speed: 1000,    // The speed to animate each shift (in milliseconds), default is 2000

    responsive: true,  // true/false or { delay: 200 }, default open responsive ability and set delay is 200

    maxShift: 3     // The maximum number of each shift, default is 4

  });

```

## Changelog

### 0.6.0

- add responsive ability

- add switcher option

- supports amd and umd

10.07.2016

### 0.5.3

- refactor codes

- add gulp, eslint, etc

26.04.2016

### 0.5.2

- fix reverse elements of arrow

07.04.2016

### 0.5.1

- fix can not show custom forward and backward selector

05.12.2015

### 0.5.0

- initial release

08.11.2015

## License

  [MIT](LICENSE)