Ninja Slider: playVedio function

The Ninja Slide has a built-in function, playVideo(indexOrLi). It can be used to programmatically control the video/audio playing. You will see this when clicking the 2nd or the last thumbnail in the demo above.

Visit Ninja Slider to download this demo or purchase license.

Note:The slider with videos functions well when the page is hosted on a web server or localhost server. Don't test it by opening the page from local file path (file:///...).

<div id='ninja-slider'>
    <!-- Omitted for brevity -->
</div>
<div id="thumbs">
    <span onclick="nslider.displaySlide(0)">
    	<img src="1.jpg" />
    </span>
    <span onclick="nslider.playVideo(1)">
    	<img src="2.jpg" /><span class="playvideo">AUTO</span>
    </span>
    <span onclick="nslider.displaySlide(2)">
    	<img src="3.jpg" />
    </span>
    <span onclick="nslider.playVideo(3)">
    	<img src="4.jpg" /><span class="playvideo">AUTO</span>
    </span>
</div>

Note: The parameter of the function playVideo(x) and displaySlide(x) can be either the slide index number(0-based), or the slide element(<li>).

Arrow Buttons

The arrows will move inside the slider when the browser size is close to the slider width, and will disappear if continue shrinking the browser to a mobile size.

This can be easily configured by the media queries in the stylesheet. Please visit Hide nav buttons on mobile phones for details.

Arrow Buttons are not needed for mobile phones as users can navigate by swipe or tap on the screen.

More Info

Full documentation: Demo 5: Video Support, Ninja Slider
Questions & Answers: Posts in the forum