网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是一款快速响应、可定制、友好的滑块组件。自适应响应基于CSS flexbox。
使用方法:
安装和下载
# Yarn
$ yarn add embla-carousel
# NPM
$ npm install embla-carousel --save
导入embla旋转木马。
import EmblaCarousel from 'embla-carousel'
或者在文档中加载编译后的JavaScript。
<script src="embla-carousel.js"></script>
添加滑块代码。
<div class="embla" id="embla">
<div class="embla__container">
<div class="embla__slide">
Slide 1
</div>
<div class="embla__slide">
Slide 2
</div>
<div class="embla__slide">
Slide 3
</div>
</div>
</div>
初始化插件。
const embla = EmblaCarousel(document.getElementById('embla'))
基本CSS样式。
.embla {
overflow: hidden;
}
.embla__container {
display: flex;
will-change: transform;
}
.embla__slide {
position: relative;
flex: 0 0 auto;
width: 100%;
}
配置项
const embla = EmblaCarousel(document.getElementById('embla'),{
// or start, center,end, number
align: 'center',
// or 'y'
axis: 'x',
// parent container
containerSelector: '*',
// choose between keeping redundant snap points or trimming them
// 'trimSnaps' or 'keepSnaps'
containScroll: '',
// the number of slides to show per page
slidesToScroll: 1,
// contains slides to the carousel viewport to prevent excessive scrolling at the beginning or the end
containScroll: false,
// enable draggable
draggable: true,
dragFree: false,
// infinite loop
loop: false,
// animation speed
speed: 10,
// start index
// 0 = slide 1
startIndex: 0,
// default CSS classes
selectedClass: 'is-selected',
draggableClass: 'is-draggable',
draggingClass: 'is-dragging',
// or using dir="rtl" on the top container
direction: 'rtl'
})
可用于创建自己的旋转木马控件的可用API方法。
// gets the container node
embla.containerNode()
// returns an array of slide nodes
embla.slideNodes()
// gets the current slide
embla.selectedScrollSnap()
// returns an array of numbers representing the scroll progress for each snap point
embla.scrollSnapList()
// gets the previous slide
embla.previousScrollSnap()
// checks if has previous slide
embla.canScrollPrevious()
// checks if has next slide
embla.canScrollNext()
// goes to the next slide
embla.scrollNext()
// goes to the previous slide
embla.scrollPrevious()
// goes to a specific slide
embla.scrollTo(index: number);
// updates options
embla.reInit(options: options);
// gets the current scroll progress
embla.scrollProgress();
// mimics how CSS scroll snap behaves on mobile
// returns true or false
embla.clickAllowed();
// destroys the instance
embla.destroy()
事件
// embla.on(event, callback)
// embla.off(event, callback)
embla.on('init', function(e){
// on init
})
embla.on('destroy', function(e){
// on destroy
})
embla.on('select', function(e){
// on a slide selected
})
embla.on('pointerDown', function(e){
// on dragStart
})
embla.on('pointerUp', function(e){
// on dragEnd
})
embla.on('click', function(e){
// on click
})
embla.on('scroll', function(e){
// on scroll
})
embla.on('settle', function(e){
// allows users to hook onto when the carousel has stopped scrolling
})
转载请注明来源:js可拖动和触摸自适应滑块特效插件
本文永久链接地址:https://www.moyouyouw.cn/code/717.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论