demos: 012345678

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

This demo requires a license for having used advanced features of the slider.


QUESTION & ANSWER
More ...

 

Your Name
Question Title
+ =  
Troubleshooting question? please read Troubleshooting Request before asking.