Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rbrtsmith/blockslider
Responsive block slider - v1.0.0
https://github.com/rbrtsmith/blockslider
Last synced: about 8 hours ago
JSON representation
Responsive block slider - v1.0.0
- Host: GitHub
- URL: https://github.com/rbrtsmith/blockslider
- Owner: rbrtsmith
- License: mit
- Created: 2015-10-01T11:54:58.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-19T20:15:41.000Z (over 7 years ago)
- Last Synced: 2024-10-28T11:01:38.114Z (10 days ago)
- Language: JavaScript
- Homepage:
- Size: 45.9 KB
- Stars: 5
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# BlockSlider
Yet another slider.. yet this one your slides are dictated by CSS or your grid system.
This slider does not come with any controls, it autoslides based on the supplied timing values, or the plugins default timing.
It's main use is for grouping company logos onto a single row, as the screen size reduces the logos do not stack, instead the grid (Your CSS) dictates how many items to show on the screen at any given moment. The cycle resets following a screen resize event.
* IE9+ compatible as it uses CSS transforms. On IE9 there is no animation between slide transitions due to lack of CSS transition support on IE9.
* Library agnostic. If jQuery is present it will register itself as a plugin
* Only 2.5k minified. ~1kb with Gzip.
* API allows for timing adjustments to transition, and slide interval.
* Number of items in view controlled by CSS / whatever grid system you are using.
* Built with performance in mind, uses minimal DOM lookups and caches values wherever possible.
* Written in ES6/ES2015 and transpiled into ES5 via Babel
##Demo
http://codepen.io/rbrtsmith/pen/ZbeXqa
##Install
**NPM**
```
npm install block-slider
```
**Bower**
```
bower install block-slider --save
```
##Useage
HTML markup - This example is using the Twitter Bootstrap grid, and for large screens displays 6 items with no sliding, smaller screens it displays 4 items, and 3 items on the smallest screens. You may use any grid system you like, or roll with your own.
You are not restricted to uses the `
`s in this example you can use any block-level elements that suit your purpose. You can also nest anything inside of the individual items.
```html
```
JavaScript
```javascript
BlockSlider(document.getElementById('block-slider'));
```
Or JavaScript + jQuery
```javascript
$('#block-slider').BlockSlider();
```
##Settings / API
The Block Slider can take an optional second argument (First when using jQuery).
Default settings:
```javascript
{
//Interval time between slides, ms
sInterval: 2000,
//Transition time when sliding, ms
sTransition: 400,
//Wrapper class
wrapClass: '.js-block-slider__wrap',
//Items class
itemsClass: '.js-block-slider__items'
}
```
##Examples
JavaScript
```javascript
BlockSlider(document.getElementById('block-slider'), {
sInterval: 1000,
sTransition: 200
});
```
JavaScript + jQuery
```javascript
$('#block-slider').BlockSlider({
sInterval: 1000,
sTransition: 200
});
```
JavaScript + jQuery - changing classes
```javascript
$('#block-slider').BlockSlider({
sInterval: 1000,
sTransition: 200,
wrapClass: '.logos-wrap',
itemsClass: '.logos'
});
```
##License
[MIT License](http://opensource.org/licenses/MIT)