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:

• Vertical layout

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>
    <div id="item-1" class="sliderTV__item">
        <img src="2.jpg">
        <h1>Title 2</h1>
    </div>
    <div id="item-2" class="sliderTV__item">
        <img src="3.jpg">
        <h1>Title 3</h1>
    </div>
    <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>
  </div>
</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

$('#sliderTV').sliderTV();

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
      $('#sliderTV').trigger('move:prev');
      break;
    case 39:
      // keypad arrow right
      $('#sliderTV').trigger('move:next');
      break;
  }
});

7. Listen to click events for particular html elements.

$('.sliderTV__next').click(function () {
  // slide to next item
  $('#sliderTV').trigger('move:next');
});
$('.sliderTV__prev').click(function () {
  // slide to previous item
  $('#sliderTV').trigger('move:prev');
});

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.clear();
  console.log('sliderTV animation has started');
});
$('#sliderTV').on('animation:end', function () {
  console.clear();
  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.
SliderTV._getId()

// Listening to events triggered on the slider.
SliderTV._listen()

// Calculate mid points for slider container.
SliderTV._calculateMidPoint()

// Get DOMs for slidable items.
SliderTV._getItemDoms()

// Set CSS position for slidable items.
SliderTV._setItemPositions()

// Set focus on slidable item.
SliderTV._setFocus()

// Remove focus from slidable item in focus.
SliderTV._removeFocus()

// Create a bullet list based on the number and status of slidable items.
SliderTV._createBullets()

// Get dom for bullets container.
SliderTV._getBullets()

// Update bullets and set active one.
SliderTV._updateBullets()

// Deactivate bullets.
SliderTV._deactiveBullets()

// Get dom for navigational elements.
SliderTV._getNavigation()

// Show or hide navigational elements.
SliderTV._showHidePrevNext()

// Check if slidable item at a specific index exists.
SliderTV._isItemExists()

// Move slidable items in order to focus target.
SliderTV._moveTo()

---

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