jQuery响应式全屏轮播插件royalslider.js

所属分类:媒体-幻灯片和轮播图

 48454  373  查看评论 (12)
分享到微信朋友圈
X
jQuery响应式全屏轮播插件royalslider.js ie兼容8

参数说明:

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

相关插件-幻灯片和轮播图

anoSlide演示8种焦点图轮播效果

anoSlide演示8种焦点图轮播效果
  幻灯片和轮播图
 27637  329

原生js轮播图炸裂切换效果

原生js写的图片炸裂轮播图
  幻灯片和轮播图
 24646  312

jquery原创图片切换插件drawerSwitch

jquery原创图片切换插件drawerSwitch
  幻灯片和轮播图
 24024  320

swiper横向轮播

swiper横向轮播,简单好用
  幻灯片和轮播图
 84339  571

讨论这个项目(12)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    刘同学 0
    2018/4/25 16:04:46
    我有一个问题,点收起左侧栏后 轮播图片不会马上更新宽度,也就是说不能及时自适应,要缩放一下页面以后才会适应屏幕大小,哪里出问题了呢 我试着改width:100% 整个就有点乱了 回复
    秘约浅语 0
    2017/7/29 16:10:17

    如何把自动轮播去掉?

        One丶1
        2018/6/19 11:34:39
        autoplay:false
    回复
    Aege-HY 0
    2017/5/23 20:39:08

    没有全部链接

        .妄曦0
        2018/9/19 14:06:39
        没有
    回复
    君莫笑 0
    2017/4/6 11:07:07

    有个问题,pc端用鼠标拖动过图片后,图片会一直跟随鼠标小箭头

    回复
    技术部―付友 0
    2017/3/31 15:38:31

    怎么把缩略图改成圆点呢?

        ←_←0
        2018/5/3 8:53:04
        应该还是改样式吧
        One丶1
        2018/6/19 11:45:29
        controlNavigation: 'thumbnails',这行去掉或者改成controlNavigation: 'bullets',
    回复
    龙大大 0
    2017/3/28 9:26:12

    怎么动态添加节点...

    回复
    给你一个承诺 0
    2017/2/9 10:58:31

    怎么在图片上加链接啊

        One丶0
        2017/2/15 17:47:45
        直接在img标签外面添加a标签就好了
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复