JS滑动图片展示插件TinySlider

来源：易助科技网浏览量：32收藏

简介

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

使用

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. 配置


Option	Type	Description
`container`	Node	String
`mode`	"carousel"	"gallery"
`axis`	"horizontal"	"vertical"
`items`	positive	Default:
`gutter`	positive	Default:
`edgePadding`	positive	Default:
`fixedWidth`	positive	FALSE
`autoWidth`	Boolean	Default:
`viewportMax`	positive	FALSE
`slideBy`	positive	"page"
`center`	Boolean	Default:
`controls`	Boolean	Default:
`controlsPosition`	"top"	"bottom"
`controlsText`	(Text	Markup)
`controlsContainer`	Node	String
`prevButton`	Node	String
`nextButton`	Node	String
`nav`	Boolean	Default:
`navPosition`	"top"	"bottom"
`navContainer`	Node	String
`navAsThumbnails`	Boolean	Default:
`arrowKeys`	Boolean	Default:
`speed`	positive	Default:
`autoplay`	Boolean	Default:
`autoplayPosition`	"top"	"bottom"
`autoplayTimeout`	positive	Default:
`autoplayDirection`	"forward"	"backward"
`autoplayText`	Array	Markup)
`autoplayHoverPause`	Boolean	Default:
`autoplayButton`	Node	String
`autoplayButtonOutput`	Boolean	Default:
`autoplayResetOnVisibility`	Boolean	Default:
`animateIn`	String	Default:
`animateOut`	String	Default:
`animateNormal`	String	Default:
`animateDelay`	positive	FALSE
`loop`	Boolean	Default:
`rewind`	Boolean	Default:
`autoHeight`	Boolean	Default:
`responsive`	Object:	FALSE
`lazyload`	Boolean	Default:
`lazyloadSelector`	String	Default:
`touch`	Boolean	Default:
`mouseDrag`	Boolean	Default:
`swipeAngle`	positive	Boolean
`preventActionWhenRunning`	Boolean	Default:
`preventScrollOnTouch`	"auto"	"force"
`nested`	"inner"	"outer"
`freezable`	Boolean	Default:
`disable`	Boolean	Default:
`startIndex`	positive	Default:
`onInit`	Function	FALSE
`useLocalStorage`	Boolean	Default:
`nonce`\|	Default:

JS滑动图片展示插件TinySlider

简介

使用

1. 引入文件

2. HTML

3. 调用

4. 配置

相关链接