js可拖动和触摸自适应滑块特效插件

演示  website 下载

这是一款快速响应、可定制、友好的滑块组件。自适应响应基于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
})

会员登陆后即可下载资源文件。更多好用网站特效插件，请关注帝国模板之家。