Vue功能丰富的滑块转盘组件–slither-slider

Vue功能丰富的滑块转盘组件–slither-slider
插件名称 slither-slider
版本号 v2.11.0
发布时间 2020年8月11日
插件作者 dolbex

滑行滑块是Vue.js的功能强大,功能齐全,易于触摸的轮播插件。

特征:

  • 有或没有控件。
  • 自动播放。
  • 无休止的循环。
  • 淡入淡出和幻灯片过渡。
  • 每张幻灯片有多个项目。
  • 全面响应和移动友好。
  • 支持任何幻灯片内容。
  • 图像延迟加载。

用法:

1.导入并注册组件。

import SlitherSlider from 'slither-slider';
Vue.use(SlitherSlider)

2.将幻灯片添加到轮播中。

<slither-slider :options="{OPTIONS HERE}">
  <!-- Slide 1 -->
  <div :style="{any styles here}">Slide 1</div>
  <!-- Slide 2 -->
  <div>
    <img src="2.jpg" />
  </div>
  <!-- Slide 3 -->
  <div>Slide 3</div>
</slither-slider>

3.使用以下选项自定义轮播。

{
  autoplay: false,
  transition: "slide", // or 'fade'
  animationDuration: 500,
  animationEasing: "easeOutQuint",
  slidePosition: "center",
  controls: true,
  dots: true,
  animatedDots: false,
  dotLimit: false,
  fullscreen: false,
  fullscreenOffset: null,
  numberOfSlides: 1,
  slideClass: null,
  sliderClass: null,
  controlsWrapperClass: null,
  overflowHiddenPadding: { top: 0, left: 0, right: 0, bottom: 0 },
  touch: true,
  endless: false,
  cuts: "right", // or left
  gap: 30,
  loop: true,
  extras: 3,
  preserveGrid: false
}

变更日志:

06/01/2021

  • v2.11.0:更新

04/26/2021

  • v2.9.0:sliderTolerances

04/22/2021

  • v2.8.3:修复了左切动画重置错误

03/18/2021

  • v2.8.3:可点击的幻灯片

2021年3月2日

  • v2.7.0:改进了幻灯片动画的定位和动画

02/20/2021

  • v2.6.1:使用最新的依赖项进行重建

02/19/2021

  • v2.6.0:添加了adaptiveHeight选项

2020年8月19日

  • v2.5.3