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.

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 bower install jquery-slidertv.
• Add a reference sliderTV.js in your html <script src="sliderTV.min.js"></script>.
• Add your HTML as shown in the examples.
• Initialize SliderTV $('#slider').sliderTV();
• Trigger events on the Slider to start the action!
• Further information can be found in docs.

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.

<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>

---

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

jquery-slidertv's Issues

Activate href with Enter key?

Dear gibbok,
Congrats to this awesome plugin. I am a total newbie in the jquery-world. Is there a way to activate the href content of the active slider element with the enter key? I would like to use your slider as a local "application launcher" on a PC.
Thanks!
Regards, Alex

Uncaught TypeError: Cannot read property 'css' of null

I am rendering multiple sliders with AJAX with different ids ,but I am getting this error
Ive used $.when( ).done(function() { ... so that I make sure the sliders have been rendered, I dont know what am I doing wrong
can you help me please

the slider right button not working?

The right slider button not working for the mouse? Left slider button works.

Create multiple instances of slidertv

Hi,
Your slidertv plugin is awesome

How do I independently control an instance of the slider

ex: I want to create 3 instances of slider tv
var inst1 = $('#sliderTV').sliderTV();
var inst2 = $('#sliderTV1').sliderTV();
var inst3 = $('#sliderTV2').sliderTV();

When inst3 is playing how do I stop inst1 and inst2 from playing ?
Any help will be greatly appreciated

more than one horizontal slider

Hello,

The slider looks very cool thanks for providing. What I want to know is if it possible to use two horizontal sliders one below another and navigation would be possible between each of them.

For example if any poster is focused on first horizontal slider when down button clicked on the keyboard it should focus on the second horizontal slider. I would be glad if you can provide an example or any idea.

Thanks again!

Click Events

Hi there @gibbok
Just wondering how to detect and trigger an event on click - as in if the user has an item selected, and clicks enter on the remote, it triggers the link that's placed on the image.

Can't figure out how to hijack the enter key on the remote and map it to an active item's link.

question

Hello, I’m writing to ask your kindly help. The thing is that : I handle a project which need your plug-in and I find a using demo in the web . But for lack of experience I’m still a green hand. When using it to dynamically load data like picture and others, I find if the wed page has been rent, it can’t be “in it” when I loading next time . It seems like the progress “in it ” has been covered , thus the following loading data haven’t been positioned.
Hope you could give me some suggestion or some special point that need to be careful treated when loading data. Thanks very much.

Activate href with Enter key, 2nd

Dear gibbok,

Thank you very much for answering the previous issue, but I am sorry bothering you again.
Inserting an <a> tag with href is not the problem. The link that you were referring to looks gorgeous. Thanks a lot!
But, instead of a mouse click to start a movie, I would like to use the enter key on the keyboard. The controls of the slider would then simply be: left/right arrow keys for navigation and enter key to launch href.
Is this possible?

Regards, Alex

疑问，学习

你好，最近由于项目需求接触到了你写的插件，但是最初版式网上的一个有现成效果的DEMO，我是小白类型的，不能完全看懂这个插件，在用的时候，我需要的是动态加载数据即图片等，我遇到了问题就是如果页面已经渲染了，再次加载的时候就没有执行init方法像是原本的这个方法被覆盖掉了的感觉，所以后来加载的数据没有被position定位，希望您能对我指点一二，或者讲解一下关于插件动态加载需要注意的问题，非常感谢