Video Slider

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:

• data-autovideo

  data-autovideo="true":   starts playing the video automatically as soon as the slide is displayed without the need of clicking on it

  data-autovideo="1":   The video will automatically play at the first time when the slide is displayed. After that the slide will resume to normal behavior: the video won't play unless it is manually clicked.

  <a class="video" href="http://vimeo.com/38375192" data-autovideo="1"> <img src="images/img3.jpg" /> </a>
  

  FAQ

  1. Why it won't auto play on mobile and iPad devices even if I have turned on the data-autovideo?

     Answer: iOS (iPhone, iPad, iPod touch) and Android devices will disable any auto play intentionally because of the high amout of traffic consume on mobile networks. Users have to play the video manually.

  2. I have thumbnails going together with my video slider, and I didn't set data-autovideo="true" to the video links, but I want clicking thumbnails will automatically play the video in the slider. Is that possible?

     Answer: Yes it is simple. See the answer on page Html5 video or audio in slider (in the yellow box of the page)

• data-autonext

  data-autonext="replay":   When the play is finished it will replay again without switching to the next slide

  data-autonext="false":   stays in current slide when the play is finished without resuming the slideshow

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.