幻灯片插件ROYALSLIDER-VIDEO GALLERY

查看演示立即下载

插件描述：RoyalSlider 可以创建包括文字、图片、视频的幻灯片效果，在每个桌面和移动设备提供良好的用户体验。经过多次测试终于把某些模板整理了出来。该模板是用于播放视频的。

使用步骤

1、引入以下的js和css文件

<link href="royalslider.css" rel="stylesheet">
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery.royalslider.min.js"></script>
<link href="reset.css" rel="stylesheet">
<link href="rs-default.css" rel="stylesheet">

2、在head标签中加入以下js代码

<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
            },
            keyboardNavEnabled: true,
            imageScaleMode: 'fill',
            imageAlignCenter: true,
            slidesSpacing: 0,
            loop: false,
            loopRewind: true,
            numImagesToPreload: 3,
            video: {
                autoHideArrows: true,
                autoHideControlNav: false,
                autoHideBlocks: true
            },
            autoScaleSlider: true,
            autoScaleSliderWidth: 960,
            autoScaleSliderHeight: 450
        });
    });
</script>

3、在body标签中加入以下格式的html代码（详细请查看下载包中的Demo）

<div class="page wrapper main-wrapper">
      
    <div class="row clearfix">
          
        <div class="col span_6 fwImage">
              
            <div id="video-gallery" class="royalSlider videoGallery rsDefault">
                <a class="rsImg" data-rsvideo="/" href="images/admin-video.png">
                <div class="rsTmb">
                      
                    <h5>
                        New RoyalSlider
                    </h5>
<span>by Dmitry Semenov</span>
                </div>
</a><a class="rsImg" data-rsvideo="/"href="images/319715493_640.jpg">
                <div class="rsTmb">
                      
                    <h5>
                        Stanley Piano
                    </h5>
<span>by Digital Kitchen</span>
                </div>
</a>
                <div class="rsContent">
                    <a class="rsImg" data-rsvideo="/" href="images/210393954_640.jpg">
                    <div class="rsTmb">
                          
                        <h5>
                            I Believe I Can Fly
                        </h5>
<span>by sebastien montaz-rosset</span>
                    </div>
</a>
                    <h3 class="rsABlock sampleBlock">
                        Animated block, to show you that you can put anything you want inside each slide.
                    </h3>
  
                </div>
<a class="rsImg" data-rsvideo="/"href="images/311891198_640.jpg">
                <div class="rsTmb">
                      
                    <h5>
                        Dubstep Dispute
                    </h5>
<span>by Fluxel Media</span>
                </div>
</a><a class="rsImg" data-rsvideo="/"href="images/318502540_640.jpg">
                <div class="rsTmb">
                      
                    <h5>
                        The Epic & The Beasts
                    </h5>
<span>by Sebastian Linda</span>
                </div>
</a><a class="rsImg" data-rsvideo="/"href="images/284709146_640.jpg">
                <div class="rsTmb">
                      
                    <h5>
                        Barcode Band
                    </h5>
<span>by Kang woon Jin</span>
                </div>
</a><a class="rsImg" data-rsvideo="/"href="images/308375094_640.jpg">
                <div class="rsTmb">
                      
                    <h5>
                        Samm Hodges Reel
                    </h5>
<span>by Animal</span>
                </div>
</a><a class="rsImg" data-rsvideo="/" href="images/02.jpg">
                <div class="rsTmb">
                      
                    <h5>
                        The Foundry Showreel
                    </h5>
<span>by The Foundry</span>
                </div>
</a>
            </div>
  
        </div>
  
    </div>
  
</div>

参数配置

参数名参数说明可选值默认值
autoScaleSlider 是否基于基础宽度自动更新滑块高度 true或false false
autoScaleSliderWidth 幻灯片基本宽度整数 800
autoScaleSliderHeight 幻灯片基本高度整数 400
imageScaleMode 图片缩放模式 “fill”, “fit”, “fit-if-smaller” 或 “none” ‘fit-if-smaller’
imageAlignCenter 幻灯片是否居中对齐 true或false true
imageScalePadding 图片和幻灯片边缘的距离，在’fill’缩放模式下不起作用数字 4
controlNavigation 导航类型 ‘bullets’, ‘thumbnails’, ‘tabs’ 或 ‘none’ ‘bullets’
arrowsNav 是否用箭头导航 true或false true
arrowsNavAutoHide 箭头导航是否自动隐藏 true或false true
arrowsNavHideOnTouch 箭头导航是否在触摸设备中隐藏 true或false false
imgWidth 所有图片的基本宽度整数 null
imgHeight 所有图片的基本高度整数 null
slidesSpacing 幻灯片之间的间隔，单位px 整数 8
startSlideId 从第几张幻灯片开始播放整数 0
loop 是否从最后一张幻灯片滑动到第一张 true或false false
loopRewind 是否从最后一张幻灯片通过环绕的方式滑动到第一张，重写loop参数 true或false false
randomizeSlides 是否随机一张幻灯片开始播放 true或false false
numImagesToPreload 幻灯片预加载的图片数量，如果设置为0，那么开始将只有一张图片显示在列表中整数 4
usePreloader Enables spinning preloader, you may style it via CSS (class rsPreloader). Since 9.3 version. true或false true
slidesOrientation 滑动方向 ‘vertical’ 或 ‘horizontal’ ‘horizontal’
transitionType 切换过渡类型 ‘move’ 或 ‘fade’ ‘move ‘
transitionSpeed 切换毫秒速度整数 600
navigateByClick 是否允许在幻灯片上点击鼠标导航 true或false true
sliderDrag 是否允许在幻灯片上鼠标拖动导航 true或false true
sliderTouch 是否允许触摸导航 rue或false true
keyboardNavEnabled 是否允许键盘按键控制导航 true或false false
fadeinLoadedSlide Fades in slide after it’s loaded. true或false true
allowCSS3 是否允许css3效果的使用 true或false true
globalCaption Adds global caption element to slide true或false true
addActiveClass 是否在切换之前将rsActiveSlide应用到当前幻灯片的样式上 true或false false
minSlideOffset 拖拽时的最小偏移量数字 10
autoHeight 缩放和动画基本高度 false

slides 重写html幻灯片，用于创建未附加到DOM的的元素 null

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效：图片放大镜插件-MLENS
下一个特效：强大的弹出框插件-FANCYBOX