RoyalSlider With jQuery Video Gallery Plugin

RoyalSlider supports YouTube and Vimeo videos and there is basic api to add custom players (includes example with JW player integration).
You can also add iframe of video directly inside slide, but it'll block touch navigation on some devices and transition between slides will be not so smooth.
Despite that this example is called video gallery, you can put anything inside each slide.

CSS::

<link href="http://dimsemenov.com/plugins/royal-slider/royalslider/royalslider.css" rel="stylesheet"/>
    
<link href="http://dimsemenov.com/plugins/royal-slider/royalslider/skins/default/rs-default.css?v=1.0.4" rel="stylesheet">

<style type="text/css">
#video-gallery {
width:700px;margin:10px auto;
}
.videoGallery .rsTmb {
  padding: 20px;
}
.videoGallery .rsThumbs .rsThumb {
  width: 220px;
  height: 80px;
  border-bottom: 1px solid #000;border-top: 1px solid #222;
}
.videoGallery .rsThumbs {
  width: 220px;
  padding: 0;
}
.videoGallery .rsThumb:hover {
  background: #000;
}
.videoGallery .rsThumb.rsNavSelected {
  background-color: #752201;
  border-bottom:-color #8C2401;
}
.sampleBlock {
  left: 3%;
  top: 1%;
  width: 100%;
  max-width: 400px;
}


#video-gallery h3{
  font-size: 20px;
  padding: 11px 13px 14px;
  background: rgba(0,0,0,0.7);
  color: #FFF;
  font-weight: normal;
  margin: 0;
  line-height: 21px;
}

@media screen and (min-width: 0px) and (max-width: 500px) {
  .videoGallery .rsTmb {
    padding: 6px 8px;
  }
  .videoGallery .rsTmb h5 {
    font-size: 12px;
    line-height: 17px;
  }
  .videoGallery .rsThumbs.rsThumbsVer {
    width: 100px;
    padding: 0;
  }
  .videoGallery .rsThumbs .rsThumb {
    width: 100px;
    height: 47px;
  }
  .videoGallery .rsTmb span {
    display: none;
  }
  .videoGallery .rsOverflow,
  .royalSlider.videoGallery {
    height:300px !important;
  }
  .sampleBlock {
    font-size: 14px;
  }
}
</style>

SCRIPT::

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

<script src="http://dimsemenov.com/plugins/royal-slider/royalslider/jquery.royalslider.min.js?v=9.3.5"></script>
<script>
jQuery(document).ready(function($) {
  $('#video-gallery').royalSlider({
    arrowsNav: false,
    fadeinLoadedSlide: true,
    controlNavigationSpacing: 0,
    controlNavigation: 'thumbnails',
    thumbs: {
      autoCenter: false,
      fitInViewport: true,
      orientation: 'vertical',
      spacing: 0,
      paddingBottom: 0
    },
autoPlay: {
      enabled: true,
      delay: 2500
    },
    keyboardNavEnabled: true,
    imageScaleMode: 'fill',
    imageAlignCenter:true,
    slidesSpacing: 0,
    loop: false,
    loopRewind: true,
    numImagesToPreload: 3,
    video: {
      autoHideArrows:true,
      autoHideControlNav:false,
      autoHideBlocks: true
    },
    autoScaleSlider: true,
    autoScaleSliderWidth:1000,    
    autoScaleSliderHeight:450
  });
});
</script>

HTML::

<div id="video-gallery" class="royalSlider videoGallery rsDefault">

<div class="rsContent">
<a class="rsImg" data-rsVideo="http://www.youtube.com/watch?v=mKNpy-tGwxE" href="http://picpost.postjung.com/data/199/199734-503b562e5efa1.jpg">
<div class="rsTmb">
<h5>GI JOE 2 Retaliation</h5>
<span>by sebastien montaz-rosset</span>
</div>
</a>
<h3 class="rsABlock sampleBlock">GI JOE 2 Retaliation Trailer HD.</h3>
</div>

<a class="rsImg" data-rsVideo="http://www.youtube.com/watch?v=HFbHRWwyihE" href="http://i.ytimg.com/vi/Mj-f7Vm501Y/0.jpg">
<div class="rsTmb">
<h5>Bizarre Love Triangle</h5>
<span>by Frente!</span>
</div>
</a>

<a class="rsImg" data-rsVideo="http://www.youtube.com/watch?v=uMYkH4pYPeo" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIN1FNKTMP0a-vn1mTU6IgY_NRSDYU5-iE-u1dTV-UngtkkBE4A1_GQdj4ZepKZ7m1WysC-OM0obS5g8f-wMncNXchOPv0KcGh1xNeX5aIGgDlt_RoshChsxMWMS74JS_tSEsMxF7B4-k/s1600/J-Rocks.jpg">
<div class="rsTmb">
<h5>Ya Aku</h5>
<span>by j-Rock</span>
</div>
</a>

<a class="rsImg" data-rsVideo="http://www.youtube.com/watch?v=uVoV_NyQgPQ" href="http://www.pustakasekolah.com/wp-content/uploads/2012/03/negeri-5-menara.jpg">
<div class="rsTmb">
<h5>Negeri 5 Menara</h5>
<span>by Negeri 5 Menara</span>
</div>
</a>

<div class="rsContent">
<a class="rsImg" data-rsVideo="http://www.youtube.com/watch?v=FRLwoMXaZHQ" href="http://s19.postimage.org/nb6c15ww3/Die_Hard5ago.jpg">
<div class="rsTmb">
<h5>Die Hard 5</h5>
<span>by Trailler HD</span>
</div>
</a>
<h3 class="rsABlock sampleBlock">Die Hard 5 Official Trailer (2013).</h3>
</div>

<a class="rsImg" data-rsVideo="http://www.youtube.com/watch?v=ejFg-4uXFk8" href="http://static.inilah.com/data/berita/foto/1357422.jpg">
<div class="rsTmb">
<h5>Layla Majnun</h5>
<span>by Zivilia</span>
</div>
</a>

<a class="rsImg" data-rsVideo="https://vimeo.com/41132461" href="http://b.vimeocdn.com/ts/284/709/284709146_640.jpg">
<div class="rsTmb">
<h5>Barcode Band</h5>
<span>by Kang woon Jin</span>
</div>
</a>

<a class="rsImg" data-rsVideo="hhttps://vimeo.com/44388232" href="http://b.vimeocdn.com/ts/308/375/308375094_640.jpg">
<div class="rsTmb">
<h5>Samm Hodges Reel</h5>
<span>by Animal</span>
</div>
</a>

<div class="rsContent">
<a class="rsImg" data-rsVideo="http://www.youtube.com/watch?v=I6RKuMt1mV8" href="http://www.kotakgame.com/images/gambar/berita/70/11/21107/s.jpg">
<div class="rsTmb">
<h5>Skyrim</h5>
<span>by sebastien montaz-rosset</span>
</div>
</a>
<h3 class="rsABlock sampleBlock">Skyrim - Official Movie Trailer 2013.</h3>
</div>

<a class="rsImg" data-rsVideo="http://www.youtube.com/watch?v=VT1-sitWRtY" href="http://25.media.tumblr.com/tumblr_lukxfvlWLu1qiz8gt_1321154831_cover.png">
<div class="rsTmb">
<h5>Wish You Were Here</h5>
<span>by Avril Lavigne</span>
</div>
</a>

</div>

Example RoyalSlider With jQuery Video Gallery Plugin.!


Please rate this article: