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.
MIT License
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.
bower install jquery-slidertv
.<script src="sliderTV.min.js"></script>
.$('#slider').sliderTV();
npm install
, bower install
.gulp connect
, gulp examples
.SliderTV plugin needs the following HTML markup:
sliderTV__item
are wrappers for your items in the carousel. You can add here, for example, some movie covers with their titles. Markup required.sliderTV__prev
and sliderTV__next
are wrapper for your navigational arrows. Markup optional.<div id="slider" class="sliderTV">
<div class="sliderTV__item">
<!-- item html -->
</div>
<div class="sliderTV__item">
<!-- item html -->
</div>
<div class="sliderTV__item">
<!-- item html -->
</div>
<div class="sliderTV__prev">
<!-- optional navigation element for previous -->
</div>
<div class="sliderTV__next">
<!-- optional navigation element for next -->
</div>
</div>
You can customize the defaults for the entire plugin or ad hoc for each instance of the slider.
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;
The speed for the Slider animation. Default is wing
.
$.fn.slider.defaults.animation.duration = 400;
Easing equation for Slider animation.
Available values are swing
and linear
(from JQuery).
Example:
$.fn.slider.defaults.animation.easing = 'swing';
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;
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:
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,
}
});