网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
Splide是一个轻量级、响应迅速、可访问、便于移动的、功能全面的滑块/旋转木插件,用纯JavaScript和CSS/CSS3实现。
功能:
支持触摸滑动和鼠标拖动
基于CSS3的平滑滑动和渐变过渡
图像延迟加载
支持嵌套滑块
支持HTML视频,youtube,vimeo
有项目上允许多个幻灯片。
自动播放
支持水平和垂直方向
基本用法:
1.在文档中加载必要的JavaScript和CSS文件。
<!-- Core -->
<link rel="stylesheet" href="dist/css/splide.min.css">
<script src="dist/js/splide.min.js"></script>
<!-- Video Extension -->
<link rel="stylesheet" href="splide-extension-video/dist/css/splide-extension-video.min.css">
<script src="splide-extension-video/dist/js/splide-extension-video.min.js"></script>
<!-- URL Hash Change Extension -->
<script src="splide-extension-url-hash/dist/js/splide-extension-url-hash.min.js"></script>
2.创建幻灯片html代码。
<div class="splide"> <div class="splide__track"> <ul class="splide__list"> <li class="splide__slide">Slide 01</li> <li class="splide__slide">Slide 02</li> <li class="splide__slide">Slide 03</li> <li class="splide__slide">Slide 04</li> <li class="splide__slide">Slide 05</li> </ul> </div> </div>
<div class="splide"> <div class="splide__track"> <ul class="splide__list"> <li class="splide__slide"> <div class="splide__slide__container"> <img src="1.jpg"> </div> Slide 1 </li> <li class="splide__slide"> <div class="splide__slide__container"> <img src="2.jpg"> </div> Slide 2 </li> <li class="splide__slide"> <div class="splide__slide__container"> <img src="3.jpg"> </div> Slide 3 </li> </ul> </div> </div>
3.在自动播放模式下,需要一个进度条,显示在转换到下一张幻灯片之前要等待的时间。
<div class="splide__progress">
<div class="splide__progress__bar">
</div>
</div>
4.使用默认选项调用滑块插件。
new Splide( '.splide' ).mount();
5.建视频旋转木马。
<div class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide" data-splide-youtube="YOUTUBE VIDEO URL">
<img src="cover.jpg">
</li>
<li class="splide__slide" data-splide-vimeo="VIMEO VIDEO URL">
<img src="cover.jpg">
</li>
</ul>
</div>
</div>
new Splide( '#splide', {
video: {
// options here
},
}).mount(window.splide.Extensions);
6.启用URL哈希更改扩展。
<div class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide" data-splide-hash="slide01"></li>
<li class="splide__slide" data-splide-hash="slide02"></li>
<li class="splide__slide" data-splide-hash="slide03"></li>
</ul>
</div>
</div>
new Splide( '#splide' ).mount(window.splide.Extensions);
7.自定义滑块的所有可能选项。
new Splide( '.splide' , {
/**
* Determine a slider type.
* - 'slide': Regular slider.
* - 'loop' : Carousel slider.
* - 'fade' : Change slides with fade transition. perPage, drag options are ignored.
*
* @type {string}
*/
type: 'slide',
/**
* Whether to rewind a slider before the first slide or after the last one.
* In "loop" mode, this option is ignored.
*
* @type {boolean}
*/
rewind: false,
/**
* Transition speed in milliseconds.
*
* @type {number}
*/
speed: 400,
/**
* Transition speed on rewind in milliseconds.
*
* @type {number}
*/
rewindSpeed: 0,
/**
* Whether to prevent any actions while a slider is transitioning.
* If false, navigation, drag and swipe work while the slider is running.
* Even so, it will be forced to wait for transition in some cases in the loop mode to shift a slider.
*
* @type {boolean}
*/
waitForTransition: true,
/**
* Define slider max width.
*
* @type {number}
*/
width: 0,
/**
* Define slider height.
*
* @type {number}
*/
height: 0,
/**
* Fix width of slides. CSS format is allowed such as 10em, 80% or 80vw.
* perPage number will be ignored when this option is falsy.
*
* @type {number|string}
*/
fixedWidth: 0,
/**
* Fix height of slides. CSS format is allowed such as 10em, 80vh but % unit is not accepted.
* heightRatio option will be ignored when this option is falsy.
*
* @type {number}
*/
fixedHeight: 0,
/**
* Determine height of slides by ratio to a slider width.
* This will be ignored when the fixedHeight is provided.
*
* @type {number}
*/
heightRatio: 0,
/**
* If true, slide width will be determined by the element width itself.
* - perPage/perMove should be 1.
* - lazyLoad should be false.
*
* @type {boolean}
*/
autoWidth: false,
/**
* Determine how many slides should be displayed per page.
*
* @type {number}
*/
perPage: 1,
/**
* Determine how many slides should be moved when a slider goes to next or perv.
*
* @type {number}
*/
perMove: 0,
/**
* Start index.
*
* @type {number}
*/
start: 0,
/**
* Determine manually how many clones should be generated on the left and right side.
* The total number of clones will be twice of this number.
*
* @type {number}
*/
clones: 0,
/**
* Determine which slide should be focused if there are multiple slides in a page.
* A string "center" is acceptable for centering slides.
*
* @type {boolean|number|string}
*/
focus: false,
/**
* Gap between slides. CSS format is allowed such as 1em.
*
* @type {number|string}
*/
gap: 0,
/**
* Set padding-left/right in horizontal mode or padding-top/bottom in vertical one.
* Give a single value to set a same size for both sides or
* do an object for different sizes.
* Also, CSS format is allowed such as 1em.
*
* @example
* - 10: Number
* - '1em': CSS format.
* - { left: 0, right: 20 }: Object for different sizes in horizontal mode.
* - { top: 0, bottom: 20 }: Object for different sizes in vertical mode.
*
* @type {number|string|Object}
*/
padding: 0,
/**
* Whether to append arrows.
*
* @type {boolean}
*/
arrows: true,
/**
* Change the arrow SVG path like 'm7.61 0.807-2.12...'.
*
* @type {string}
*/
arrowPath: '',
/**
* Whether to append pagination(indicator dots) or not.
*
* @type {boolean}
*/
pagination: true,
/**
* Activate autoplay.
*
* @type {boolean}
*/
autoplay: false,
/**
* Autoplay interval in milliseconds.
*
* @type {number}
*/
interval: 5000,
/**
* Whether to stop autoplay when a slider is hovered.
*
* @type {boolean}
*/
pauseOnHover: true,
/**
* Whether to stop autoplay when a slider elements are focused.
* True is recommended for accessibility.
*
* @type {boolean}
*/
pauseOnFocus: true,
/**
* Whether to reset progress of the autoplay timer when resumed.
*
* @type {boolean}
*/
resetProgress: true,
/**
* Loading images lazily.
* Image src must be provided by a data-splide-lazy attribute.
*
* - false: Do nothing.
* - 'nearby': Only images around an active slide will be loaded.
* - 'sequential': All images will be sequentially loaded.
*
* @type {boolean|string}
*/
lazyLoad: false,
/**
* This option works only when a lazyLoad option is "nearby".
* Determine how many pages(not slides) around an active slide should be loaded beforehand.
*
* @type {number}
*/
preloadPages: 1,
/**
* Easing for CSS transition. For example, linear, ease or cubic-bezier().
*
* @type {string}
*/
easing: 'cubic-bezier(.42,.65,.27,.99)',
/**
* Whether to control a slide via keyboard.
*
* @type {boolean}
*/
keyboard: true,
/**
* Whether to allow mouse drag and touch swipe.
*
* @type {boolean}
*/
drag: true,
/**
* The angle threshold for drag.
* The slider starts moving only when the drag angle is less than this threshold.
*
* @type {number}
*/
dragAngleThreshold: 30,
/**
* Distance threshold for determining if the action is "flick" or "swipe".
* When a drag distance is over this value, the action will be treated as "swipe", not "flick".
*
* @type {number}
*/
swipeDistanceThreshold: 150,
/**
* Velocity threshold for determining if the action is "flick" or "swipe".
* Around 0.5 is recommended.
*
* @type {number}
*/
flickVelocityThreshold: .6,
/**
* Determine power of flick. The larger number this is, the farther a slider runs by flick.
* Around 500 is recommended.
*
* @type {number}
*/
flickPower: 600,
/**
* Limit a number of pages to move by flick.
*
* @type {number}
*/
flickMaxPages: 1,
/**
* Slider direction.
* - 'ltr': Left to right.
* - 'rtl': Right to left.
* - 'ttb': Top to bottom.
*
* @type {string}
*/
direction: 'ltr',
/**
* Set img src to background-image of its parent element.
* Images with various sizes can be displayed as same dimension without cropping work.
* fixedHeight or heightRatio is required.
*
* @type {boolean}
*/
cover: false,
/**
* Whether to enable accessibility(aria and screen reader texts) or not.
*
* @type {boolean}
*/
accessibility: true,
/**
* Whether to add tabindex="0" to visible slides or not.
*
* @type {boolean}
*/
slideFocus: true,
/**
* Determine if a slider is navigation for another.
* Use "sync" API to synchronize two sliders.
*
* @type {boolean}
*/
isNavigation: false,
/**
* Whether to trim spaces before the fist slide or after the last one when "focus" is not 0.
*
* @type {boolean}
*/
trimSpace: true,
/**
* Slide status is updated after move as default.
* If true, it will be updated before move.
*
* @type {boolean}
*/
updateOnMove: false,
/**
* Throttle duration in milliseconds for the resize event.
*
* @type {number}
*/
throttle: 100,
/**
* Breakpoints definitions.
*
* @example
* {
* '1000': {
* perPage: 3,
* gap: 20
* },
* '600': {
* perPage: 1,
* gap: 5,
* }
* }
*
* @type {boolean|Object}
*/
breakpoints: false,
/**
* Collection of class names.
*
* @see ./classes.js
*
* @type {Object}
*/
classes: ELEMENT_CLASSES,
/**
* Collection of i18n texts.
*
* @see ./i18n.js
*
* @type {Object}
*/
i18n: I18N
}).mount();
8.视频扩展的可能选项
new Splide( '.splide' , {
video: {
/**
* Whether to play the video automatically.
*
* @type {boolean}
*/
autoplay: false,
/**
* Hide the video control UI.
*
* @type {boolean}
*/
hideControls: false,
/**
* Hide full screen button.
* Only for YouTube.
*
* @type {boolean}
*/
disableFullScreen: false,
/**
* Loop the video.
*
* @type {boolean}
*/
loop: false,
/**
* Mute the video.
*
* @type {boolean}
*/
mute: false,
/**
* Default volume(0.0-1.0).
*
* @type {number}
*/
volume: 0.2
}
})
9.也可以通过HTML数据属性传递选项,如下所示:
<div class="splide" data-splide="{OPTIONS HERE}">
</div>
10.事件侦听器
instance.on( 'mounted', function () {
// do something
});
instance.on( 'updated', function (OPTIONS) {
// do something
});
instance.on( 'move', function (newIndex, oldIndex, destIndex) {
// do something
});
instance.on( 'moved', function (newIndex, oldIndex, destIndex) {
// do something
});
instance.on( 'drag', function (info) {
// do something
});
instance.on( 'dragged', function (info) {
// do something
});
instance.on( 'visible', function (slideObject) {
// do something
});
instance.on( 'hidden', function (slideObject) {
// do something
});
instance.on( 'active', function (slideObject) {
// do something
});
instance.on( 'inactive', function (slideObject) {
// do something
});
instance.on( 'click', function (slideObject) {
// do something
});
instance.on( 'arrows:mounted', function (prev, next) {
// do something
});
instance.on( 'arrows:updated', function (prev, next, prevIndex, nextIndex) {
// do something
});
instance.on( 'pagination:mounted', function (data, activeItem:) {
// do something
});
instance.on( 'pagination:updated', function (data, prevItem, nextItem) {
// do something
});
instance.on( 'navigation:mounted', function (Splide) {
// do something
});
instance.on( 'autoplay:play', function () {
// do something
});
instance.on( 'autoplay:pause', function () {
// do something
});
instance.on( 'autoplay:playing', function () {
// do something
});
instance.on( 'lazyload:loaded', function () {
// do something
});
instance.on( 'video:play', function (player) {
// do something
});
instance.on( 'video:paused', function (player) {
// do something
});
instance.on( 'video:ended', function (player) {
// do something
});
11.属性
// root element
splide.root
// zero-based active index
splide.index
// options
splide.options
// the number of slides
splide.length
// a collection of CSS classes
splide.classes
// i18n
splide.i18n
// an object containing all components
splide.Components
// set/get state
// CREATED = 1: Splide instance has just been created.
// MOUNTED = 2: All components have been mounted.
// IDLE = 3: Idling.
// MOVING = 4: The slider is moving.
splide.State.is( 4 )
splide.State.set( 2 )
12.API方法
// go to a specific slide
// {number}: Go to slide specified by {number}.
// '+','+{number}': Increase active slide index.
// '-','-{number}': Decrease active slide index.
// '>','>{number}': Go to next page or the page specified by {number}. For example, '>2' moves a slider to page 2.
// '<','<{number}': Go to previous page or the page specified by {number}.
splide.go(0);
// check the slider type
// SLIDE = 'slide'
// LOOP = 'loop'
// FADE = 'fade'
splide.is( 'loop' );
// register a Splide instance for sync
// must be called before mount().
splide.sync( splide );
// add a new slide
splide.add( slide, index );
// remove a slide
splide.remove( index );
// refresh the slider
splide.refresh();
// destroy the slider
splide.destroy();
转载请注明来源:JS( Splide)幻灯片滑块/旋转木马特效插件(可垂直/水平)
本文永久链接地址:https://www.moyouyouw.cn/code/764.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论