帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

js原生多功能可定制滑块特效插件(keen slider)

帝国模板之家 2020-11-12 网页特效 评论

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
    },
});

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

有些事,即便认为它是完美的,也可以通过再次努力推动它,来获得价值以上的东西。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言