建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JS滑动图片展示插件TinySlider

来源:易助科技网浏览量:37收藏

简介


tinyslider是一个只有1.5K左右的独立的滑动图片展示JS库,无需其他JS支持,可通过CSS来定制展示的外观,可展示的不仅仅是图片,同时该脚本还支持自动的旋转和恢复等功能。


JS滑动图片展示插件TinySlider-示例图



使用


1.  引入文件


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
!--[if (lt IE 9)]><script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/min/tiny-slider.helper.ie8.js"></script>![endif]-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>


2.  HTML


<div class="my-slider">
  <div></div>
  <div></div>
  <div></div>
</div>


3.  调用


<script>
  var slider = tns({
    container: '.my-slider',
    items: 1,
    responsive: {
      640: {
        edgePadding: 20,
        gutter: 20,
        items: 2
      },
      700: {
        gutter: 30
      },
      900: {
        items: 3
      }
    }
  });
</script>


4.  配置


   
OptionTypeDescription
`container`NodeString
`mode`"carousel""gallery"
`axis`"horizontal""vertical"
`items`positiveDefault:
`gutter`positiveDefault:
`edgePadding`positiveDefault:
`fixedWidth`positiveFALSE
`autoWidth`BooleanDefault:
`viewportMax`positiveFALSE
`slideBy`positive"page"
`center`BooleanDefault:
`controls`BooleanDefault:
`controlsPosition`"top""bottom"
`controlsText`(TextMarkup)
`controlsContainer`NodeString
`prevButton`NodeString
`nextButton`NodeString
`nav`BooleanDefault:
`navPosition`"top""bottom"
`navContainer`NodeString
`navAsThumbnails`BooleanDefault:
`arrowKeys`BooleanDefault:
`speed`positiveDefault:
`autoplay`BooleanDefault:
`autoplayPosition`"top""bottom"
`autoplayTimeout`positiveDefault:
`autoplayDirection`"forward""backward"
`autoplayText`ArrayMarkup)
`autoplayHoverPause`BooleanDefault:
`autoplayButton`NodeString
`autoplayButtonOutput`BooleanDefault:
`autoplayResetOnVisibility`BooleanDefault:
`animateIn`StringDefault:
`animateOut`StringDefault:
`animateNormal`StringDefault:
`animateDelay`positiveFALSE
`loop`BooleanDefault:
`rewind`BooleanDefault:
`autoHeight`BooleanDefault:
`responsive`Object:FALSE
`lazyload`BooleanDefault:
`lazyloadSelector`StringDefault:
`touch`BooleanDefault:
`mouseDrag`BooleanDefault:
`swipeAngle`positiveBoolean
`preventActionWhenRunning`BooleanDefault:
`preventScrollOnTouch`"auto""force"
`nested`"inner""outer"
`freezable`BooleanDefault:
`disable`BooleanDefault:
`startIndex`positiveDefault:
`onInit`FunctionFALSE
`useLocalStorage`BooleanDefault:
`nonce`|Default: 



相关链接


Github 地址 :https://github.com/ganlanyuan/tiny-slider

效果演示 :  http://ganlanyuan.github.io/tiny-slider/demo/