欢迎光临一流素材网,免积分免费素材下载!
AD

幻灯片插件ROYALSLIDER-VIDEO GALLERY

所属栏目:轮播图/幻灯片更新时间:2016-10-17原作者:不详发布者:deepdfhy浏览:0
基本信息
  • 发布者:
  • 原作者:不详
  • 来源:不详
  • 版权声明

兼容:Firefox,Chrome,Safari,IE10+,IE9,IE8,IE6

使用步骤

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 span6 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/210393954640.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/311891198640.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






具体效果请看演示,一流资源网推荐下载。

标签:
代码下载
本站下载
收藏 0 有帮助 0 没帮助 0
请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

立即打赏 0
给个评价吧
最受欢迎的

1jquery手机端响应式banner图片滚动切换效果

2兼容触屏手机浏览的JS全屏焦点图代码

3jQuery touchSlider全屏图片轮播幻灯焦点图代码

4jquery灯箱画廊插件lightgallery

5jquery轮播焦点图

6js卡片式图片叠加滚动切换代码

7带左右箭头滑动焦点图幻灯片jQuery特效代码

8jquery旋转木马插件SLICK

93D效果图片轮播效果代码

10jQ轻量级触摸响应滑块插件JQuery lightSlideruery轮播图插件movingboxes.js

最新更新的

1jQuery响应式触屏图片左右滚动代码owl.carousel

2轻量级响应式jQuery轮播图/幻灯片插件-lightslider

3移动端滑动JS响应式轮播图插件

4jQuery倾斜图片切换滚动焦点图幻灯片代码

5jQuery版仿淘宝商城天猫首页多格焦点图效果

6易迅网竖排多格jquery焦点图代码

7jQ索引按钮+缩略图双重切换

8兼容触屏手机浏览的JS全屏焦点图代码

9鼠标滑过+自动播放jQ全屏焦点图代码

10Diapo轮播图-幻灯片插件