幻灯片插件ROYALSLIDER-VIDEO GALLERY

 查看演示  website  立即下载

使用步骤

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="http://www.youtube.com/watch?v=HFbHRWwyihE" href="images/admin-video.png">
                <div class="rsTmb">
                     
                    <h5>
                        New RoyalSlider
                    </h5>
<span>by Dmitry Semenov</span>
                </div>
</a><a class="rsImg" data-rsvideo="https://vimeo.com/45830194"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="https://vimeo.com/31240369" 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="https://vimeo.com/44878206"href="images/311891198_640.jpg">
                <div class="rsTmb">
                     
                    <h5>
                        Dubstep Dispute
                    </h5>
<span>by Fluxel Media</span>
                </div>
</a><a class="rsImg" data-rsvideo="https://vimeo.com/45778774"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="https://vimeo.com/41132461"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="hhttps://vimeo.com/44388232"href="images/308375094_640.jpg">
                <div class="rsTmb">
                     
                    <h5>
                        Samm Hodges Reel
                    </h5>
<span>by Animal</span>
                </div>
</a><a class="rsImg" data-rsvideo="http://www.youtube.com/watch?v=VDspPKDMBMo" 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

PREVIOUS:
NEXT:
强大的弹出框插件-FANCYBOX
图片放大镜插件-MLENS