Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gibbok/jquery-slidertv
SliderTV is an easy-to-use jQuery slider plugin optimized for Smart TV apps. Use jQuery SliderTV for controlling any HTML based content in horizontal or vertical order in a carousel-like fashion.
https://github.com/gibbok/jquery-slidertv
carousel javascript jquery jquery-plugin slider slider-animation smart-tv
Last synced: about 2 months ago
JSON representation
SliderTV is an easy-to-use jQuery slider plugin optimized for Smart TV apps. Use jQuery SliderTV for controlling any HTML based content in horizontal or vertical order in a carousel-like fashion.
- Host: GitHub
- URL: https://github.com/gibbok/jquery-slidertv
- Owner: gibbok
- License: mit
- Created: 2016-03-19T14:59:25.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2022-11-06T19:37:24.000Z (about 2 years ago)
- Last Synced: 2024-10-11T10:36:30.105Z (2 months ago)
- Topics: carousel, javascript, jquery, jquery-plugin, slider, slider-animation, smart-tv
- Language: JavaScript
- Homepage:
- Size: 3.48 MB
- Stars: 12
- Watchers: 5
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# SliderTV
SliderTV is an easy-to-use jQuery slider plugin optimized for Smart TV apps.
Use jQuery SliderTV for controlling any HTML based content in horizontal or vertical order in a carousel-like fashion.
### Features
- Slide any HTML content horizontally or vertically in your Smart TV application.
- Support for interactive navigational arrows, compatible with LG Magic Control.
- Automatic focusing.
- Support for multiple carousels on the same View.
- Support for bullets.
- Jump to any HTML content using previous/next or by an identifier.
---
### Great! So how do I use it?
- Install with [Bower](http://bower.io) `bower install jquery-slidertv`.
- Add a reference sliderTV.js in your html ``.
- Add your HTML as shown in the [examples](examples).
- Initialize SliderTV `$('#slider').sliderTV();`
- Trigger events on the Slider to start the action!
- Further information can be found in [docs](docs/sliderTV.md).
### How do I run the examples?
- First install all dependencies folder using:: `npm install`, `bower install`.
- Now runs your local server and open the examples: `gulp connect`, `gulp examples`.
---
### Markup
SliderTV plugin needs the following HTML markup:
- DIVs with class `sliderTV__item` are wrappers for your items in the carousel. You can add here, for example, some movie covers with their titles. Markup required.
- DIVs with class `sliderTV__prev` and `sliderTV__next` are wrapper for your navigational arrows. Markup optional.
```
```
---
### Customization
You can customize the defaults for the entire plugin or ad hoc for each instance of the slider.
#### Global defaults
##### Animation direction
The direction of the Slider animation. By default the Slider has a horizontal carousel style. You can enable vertical carousel using this option.
Available values are `true` or `false`.
Example:
`$.fn.slider.defaults.animation.isVertical = true;`
##### Animation speed
The speed for the Slider animation. Default is `wing`.
`$.fn.slider.defaults.animation.duration = 400;`
##### Animation easing
Easing equation for Slider animation.
Available values are `swing` and `linear` (from JQuery).
Example:
`$.fn.slider.defaults.animation.easing = 'swing';`
##### Bullets
Bullets are "indicator", useful for showing how many items are in your slider and which one is currently focused.
They are created by default but you can decide to having them or not using the following option.
Available values are `true` or `false`.
Example:
`$.fn.slider.defaults.bullets.canShow = true;`
##### Navigation
Navigational elements indicate if a "next" or "previous" item in the slider exists for the currently focused item.
In order to enable these elements you need to add your own HTML markup and just add classes `slider__next` and `slider__prev`.
The following example shows you a typical HTML for a Slider plus Navigational elements:
#### Per instance
Initialize your instance passing an object with properties as options above.
The defaults will be applied per instance.
Example:
```
$('#sliderTV').sliderTV({
animation: {
duration: 50,
easing: 'linear',
isVertical: true
},
bullets: {
canShow: false,
}
});
```
## Examples
#### Horizontal carousel
#### Vertical carousel
