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: 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


Ask Question

Question Title:
Your name:
+ =    
  • If your question is for troubleshooting, please read Troubleshooting Request before posting.
  • A title with good keywords will help others. Please make your title specific and on-topic
  • Questions related to styles(CSS) may not be answered

more ...