demos: 012345678

Video Slider

Ninja Slider also supports YouTube, Vimeo and HTML video/audio. Visit Play Youtube, Vimeo, HTML video/audio with Ninja Slider for details.

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:///...).

How to embed HTML5 videos or audios to the slider

Please refer to Play HTML5 Video or Audio in slider

How to embed YouTube or Vimeo videos to the slider

  1. Another script, mcVideoPlugin.js that is available in the download, should be referenced before the js-image-slider.js <script src="themes/6/mcVideoPlugin.js" type="text/javascript"></script> <script src="themes/6/js-image-slider.js" type="text/javascript"></script>
  2. Wrap slide picture with a link to the video. The link should specify class="video" and its href must be formatted as below without any extra parameters. <a class="video" href="http://vimeo.com/38375192"> <img src="images/img3.jpg" /> </a> <a class="video" href="http://www.youtube.com/watch?v=AQ-3aRhvFwU"> <img src="images/img4.jpg" alt="description" /> </a>

    Or, if you prefer lazy loading images, you can write the HTML in the following way:

    <a class="video" href="http://vimeo.com/38375192"> <b data-src="images/img3.jpg"></b> </a> <a class="video" href="http://www.youtube.com/watch?v=AQ-3aRhvFwU"> <b data-src="images/img4.jpg" data-alt="description"></b> </a>

And there you have it!

More Options

You can add the attributes below to override the video slider's default behavior:

You can download the source code from page Menucool Javascript Image Slider.

This demo requires a JavaScript Image Slider license for using the advanced features such as playing video and lazy loading image.