README

适用于所有目的的Tiny slider，灵感来源于Owl Carousel。

演示

测试结果

先前版本: v1, v0

警告：tiny-slider与静态内容一起工作，仅适用于浏览器。如果HTML是动态加载的，请确保在加载后调用tns()。

内容

新增功能
特性
安装
使用
选项
响应式选项
方法
自定义事件
回退
浏览器支持
支持
许可证

新增功能

使用%代替px（无需在窗口大小调整时重新计算每个幻灯片的宽度）
如果支持，则使用CSS媒体查询
将浏览器能力值保存到localStorage，这样它们就不会在浏览器升级或用户手动清除localStorage之前再次检查。
从v2.1.0开始，responsive字段提供更多选项。（有关详细信息，请参阅v2.1.0和问题53）
将controls和nav插入到滑块之前而不是之后（有关详细信息，请参阅问题4）
将autoplay按钮移出nav容器。（从v2.1.0开始）
在tiny-slider.scss中进行了一些选择器更改

迁移到v2

根据位置更改更新controls和/或nav样式。
如果您的CSS或JS中使用，请相应地更新slider selectors。
更新与autoplay按钮相关的样式。

top↑

特性

* 默认

top↑

安装

bower install tiny-slider或npm install tiny-slider

使用

1. 添加CSS（如果需要，请添加IE8 polyfills）

<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]-->

2. 添加标记

<div class="my-slider">
  <div></div>
  <div></div>
  <div></div>
</div>
<!-- or ul.my-slider > li -->

3. 调用tns()

选项A：将tiny-slider.js添加到您的页面

<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
<!-- NOTE: prior to v2.2.1 tiny-slider.js need to be in <body> -->

选项B：通过webpack或rollup导入tns

// yourScript.js
import { tns } from "./node_modules/tiny-slider/src/tiny-slider"

选项C：从v2.8.2开始直接导入tns

<script type="module">
  import {tns} from './src/tiny-slider.js';

  var slider = tns({
    container: '.my-slider',
    items: 3,
    slideBy: 'page',
    autoplay: true
  });
  </script>

top↑

选项

注意：在v2.0.2之前，选项"container"、"controlsContainer"、"navContainer"和"autoplayButton"仍然是DOM元素。例如，container: document.querySelector('.my-slider')

top↑

响应式选项

以下选项可以在responsive字段中重新定义：startIndex、items、slideBy、speed、autoHeight、fixedWidth、edgePadding、gutter、center、controls、controlsText、nav、autoplay、autoplayHoverPause、autoplayResetOnVisibility、autoplayText、autoplayTimeout、touch、mouseDrag、arrowKeys、disable

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

注意

断点行为类似于CSS中的(min-width: breakpoint)，因此未定义的选项将继承自上一个较小断点。
fixedWidth只能更改为其他正整数。它不能更改为负整数、0或其他数据类型。top↑

方法

滑块初始化后，会返回一个具有一些属性和方法的滑块对象

{
  version: version, // tiny-slider version
  getInfo: info(),
  events: events, // Object
  goTo: goTo(),
  play: play(),
  pause: pause(),
  isOn: isOn, // Boolean
  updateSliderHeight: updateInnerWrapperHeight(),
  refresh: initSliderTransform(),
  destroy: destroy(),
  rebuild: rebuild()
}

要获取滑块信息，您可以使用 getInfo() 方法或订阅事件。两者都返回一个对象

{
                container: container, // slider container
               slideItems: slideItems, // slides list
             navContainer: navContainer, // nav container
                 navItems: navItems, // dots list
        controlsContainer: controlsContainer, // controls container
              hasControls: hasControls, // indicate if controls exist
               prevButton: prevButton, // previous button
               nextButton: nextButton, // next button
                    items: items, // items on a page
                  slideBy: slideBy // items slide by
               cloneCount: cloneCount, // cloned slide count
               slideCount: slideCount, // original slide count
            slideCountNew: slideCountNew, // total slide count after initialization
                    index: index, // current index
              indexCached: indexCached, // previous index
             displayIndex: getCurrentSlide(), // display index starts from 1
               navCurrent: navCurrent, // current dot index
         navCurrentCached: navCurrentCached, // previous dot index
                    pages: pages, // visible nav indexes
              pagesCached: pagesCached,
                    sheet: sheet,
                    event: e || {}, // event object if available
};

getInfo

获取滑块信息。

slider.getInfo();

document.querySelector('.next-button').onclick = function () {
  // get slider info
  var info = slider.getInfo(),
      indexPrev = info.indexCached,
      indexCurrent = info.index;

  // update style based on index
  info.slideItems[indexPrev].classList.remove('active');
  info.slideItems[indexCurrent].classList.add('active');
};

goTo

通过数字或关键词跳转到特定的幻灯片。

slider.goTo(3);
slider.goTo('prev');
slider.goTo('next');
slider.goTo('first');
slider.goTo('last');

document.querySelector('.goto-button').onclick = function () {
  slider.goTo(3);
};

play

当 autoplay: true 时，以编程方式启动滑块自动播放。

slider.play();

pause

当 autoplay: true 时，以编程方式停止滑块自动播放。

slider.pause();

updateSliderHeight

当 autoHeight 为 true 时，手动调整滑块高度。

slider.updateSliderHeight();

destroy

销毁滑块。

slider.destroy();

rebuild

在销毁后重新构建滑块。

slider = slider.rebuild();
// this method returns a new slider Object with the same options with the original slider

自定义事件

可用的事件包括：indexChanged、transitionStart、transitionEnd、newBreakpointStart、newBreakpointEnd、touchStart、touchMove、touchEnd、dragStart、dragMove 和 dragEnd。

var customizedFunction = function (info, eventName) {
  // direct access to info object
  console.log(info.event.type, info.container.id);
}

// bind function to event
slider.events.on('transitionEnd', customizedFunction);

// remove function binding
slider.events.off('transitionEnd', customizedFunction);

top↑

回退

.no-js .your-slider { overflow-x: auto; }
.no-js .your-slider > div { float: none; }

浏览器支持

桌面： Firefox 8+ ✓ Chrome 15+ ✓ (应在 Chrome 4-14 上也能工作，但我无法测试。) Safari 4+ ✓ Opera 12.1+ ✓ IE 8+ ✓

移动端： Android 浏览器 4.2+ ✓ Chrome 移动版 63+ ✓ Firefox 移动版 28+ ✓ Maxthon 4+ ✓

支持

实时测试和自动测试

实时测试、截图和自动测试

Cdnjs
演示页面上的图片来自 https://unsplash.com/。

许可证

此项目可在 MIT 许可下使用。

levmyshkin / tiny-slider

维护者

详情

README

内容

新增功能

特性

安装

使用

1. 添加CSS（如果需要，请添加IE8 polyfills）

2. 添加标记

3. 调用tns()

选项

响应式选项

方法

getInfo

goTo

play

pause

updateSliderHeight

destroy

rebuild

自定义事件

回退

浏览器支持

支持

许可证