网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
keen slider是一款多功能的、原生js滑块插件,可以在有触控和拖动事件的任何元素之间进行切换。
功能:
内容延迟加载
可选的分页和导航控件
就像一个无限的旋转木马。
同一个页面可以添加多个幻灯片
切换后自动获取到下一张/上一张幻灯片。
水平和垂直两个模式
自适应设计
支持Vanilla,Vue,Angular,JavaScript
功能强大但易于实现
安装和下载:
# NPM
$ npm install keen-slider --save
1.将keen滑块作为模块导入。
import 'keen-slider/keen-slider.min.css'
import KeenSlider from 'keen-slider'
2.或者从CDN加载JavaScript和CSS文件。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/keen-slider/keen-slider.min.css" />
<script src="https://cdn.jsdelivr.net/npm/keen-slider/keen-slider.min.js"></script>
3.创建一个KeenSlider实例。
var slider1 = new KeenSlider("#slider1");
4.添加幻灯片。
<div id="slider1" class="keen-slider">
<div class="keen-slider__slide">Slide 1</div>
<div class="keen-slider__slide">Slide 2</div>
<div class="keen-slider__slide">Slide 3</div>
<div class="keen-slider__slide">Slide 4</div>
<div class="keen-slider__slide">Slide 5</div>
...
</div>
5.通过将以下options对象作为第二个参数传递给KeenSlider方法
var slider1 = new KeenSlider("#slider1",{
// auto set the slider to the height of the tallest slide
autoHeight: true,
// auto center the current slide
centered: false,
// pass options for different screen size
// e.g.
// breakpoints: {
// '(min-width: 720px) and (max-width: 1000px)': {
// options here
// },
// }
breakpoints: null,
// enable mouse drag and touch swipe events
controls: true,
// adjust the speed that is translated to the slider when dragging
dragSpeed: 1,
// friction factor
friction: 0.0025,
// enable infinite loop
loop: false,
// initial slide
initial: 0,
// duration of the animation
duration: 500,
// slide selector
slides: '.keen-slider__slide',
// enable vertical mode
vertical: false,
// reset the slider on window resize
resetSlide: false,
// how many slides per view
slidesPerView: 1,
// space between slides
spacing: 0,
// "snap": auto snap to the next/prev slide
// "free-snap": free mode + auto snap
// "free": free mode
mode: 'snap',
// simulate rubberband if moving or dragging above the slider edge
rubberband: true
});
6.API方法
// go to the next slide
slider1.next();
// back to the previous slide
slider1.prev();
// go to a specific slide
slider1.moveToSlide (slide);
// go to a relative slide
slider1.moveToSlideRelative(slide, nearest, duration);
// enable/disable touch & drag events
slider1.controls();
// refresh the slider
slider1.refresh(options);
// re-init the slider
slider1.Reinitialize();
// re-calc the width/height of the slider
// useful when new items are added to the slider
slider1.resize();
// destroy the slider instance
slider1.destroy();
// return the details of the slider.
slider1.details();
7.事件处理程序。
var slider1 = new KeenSlider("#slider1",{
created: slider => {
// do something
},
mounted: slider => {
// do something
},
beforeChange: slider => {
// do something
},
afterChange: slider => {
// do something
},
slideChanged: slider => {
// do something
},
dragStart: slider => {
// do something
},
dragEnd: slider => {
// do something
},
move: slider => {
// do something
},
destroyed: slider => {
// do something
},
});
转载请注明来源:js原生多功能可定制滑块特效插件(keen slider)
本文永久链接地址:https://www.moyouyouw.cn/code/718.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
上一篇
下一篇
已有 位小伙伴发表了看法
欢迎 你 发表评论