jQuery Image Carousel Plugin For Smart TV Apps - SliderTV

File Size: 3.4 MB
Views Total: 3416
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Image Carousel Plugin For Smart TV Apps - SliderTV

SliderTV is an image slider jQuery plugin designed for smart TV apps that allows to control a list of items in horizontal or vertical order like a carousel. Use your keyboard left or right arrow to navigate to the next or previous carousel item, or alternatively click the left or right arrow on the screen.

More example:

How to use it:

1. Include a layout CSS of you choice in the head section of the html document.

<link href="css/horizontal.css" rel="stylesheet">
<!-- Or vertical.css for vertical carousel -->
<link href="css/vertical.css" rel="stylesheet">

2. The required sliderTV html structure.

<div id="wrapper-sliderTv">
  <!-- sliderTV html-->
  <div id="sliderTV" class="sliderTV">
    <!-- slidable items in carousel -->
    <div id="item-0" class="sliderTV__item">
        <img src="1.jpg">
        <h1>Title 1</h1>
    <div id="item-1" class="sliderTV__item">
        <img src="2.jpg">
        <h1>Title 2</h1>
    <div id="item-2" class="sliderTV__item">
        <img src="3.jpg">
        <h1>Title 3</h1>
    <div id="sliderTV__mask-left"></div>
    <div id="sliderTV__mask-right"></div>
    <!-- optional navigational arrows -->
    <div class="sliderTV__prev">&#10096;</div>
    <div class="sliderTV__next">&#10097;</div>

3. Include jQuery library and the jQuery SliderTV plugin's script at the end of the document.

<script src="//code.jquery.com/jquery-1.12.2.min.js"></script>
<script src="dist/sliderTV.js"></script>

4. Let's initiate the sliderTV plugin


5. At first focus on the fifth item sliding the carousel, notice canAnimate: false, which prevents the animation after initialization.

$('#sliderTV').trigger('move:jump', { to: 4, canAnimate: false });

6. In your real world smart tv application you can listen to events from remote control, in this demo we just listen to keypad arrow left and right.

$('body').keydown(function (e) {
  switch (e.keyCode) {
    case 37:
      // keypad arrow left
    case 39:
      // keypad arrow right

7. Listen to click events for particular html elements.

$('.sliderTV__next').click(function () {
  // slide to next item
$('.sliderTV__prev').click(function () {
  // slide to previous item

8. Listen to events emitted by sliderTV plugin, in this code below, we are "listening" to whenever the sliding animation starts and ends.

$('#sliderTV').on('animation:start', function () {
  console.log('sliderTV animation has started');
$('#sliderTV').on('animation:end', function () {
  console.log('sliderTV animation has finished');

9. You can optionally change sliderTV plugin defaults like this:

// animation direction
$.fn.sliderTV.defaults.animation.isVertical = true;   

// animation duration
$.fn.sliderTV.defaults.animation.duration = 250;      

// animation type
$.fn.sliderTV.defaults.animation.easing = 'swing';    

// show bullet elements
$.fn.sliderTV.defaults.bullets.canShow = true;        

10. API.

// Get the id for slider instance.

// Listening to events triggered on the slider.

// Calculate mid points for slider container.

// Get DOMs for slidable items.

// Set CSS position for slidable items.

// Set focus on slidable item.

// Remove focus from slidable item in focus.

// Create a bullet list based on the number and status of slidable items.

// Get dom for bullets container.

// Update bullets and set active one.

// Deactivate bullets.

// Get dom for navigational elements.

// Show or hide navigational elements.

// Check if slidable item at a specific index exists.

// Move slidable items in order to focus target.

This awesome jQuery plugin is developed by gibbok. For more Advanced Usages, please check the demo page or visit the official website.