开发前端软件素材源码教程下载网站

全部
网站模板
网页特效
网站源码
素材资源
建站学院
软件工具
mysql mysql 微信 微信 小程序 苹果 dedecms 修真图
当前位置：首页 > 网页特效 > 滑块 >  CSS3转换 响应滑块插件 Glide.js

CSS3转换 响应滑块插件 Glide.js

  • 源码大小：195.01KB
  • 所需积分：1积分
  • 源码编号：19JP-3382
  • 浏览次数：772次
  • 最后更新：2023年06月07日
  • 所属栏目：滑块
我要下载
加入收藏
本站默认解压密码：19jp.com 或 19jp_com

最新资源

[软件工具] 雷神网游加速器 免费体验
[软件工具] 360极速浏览器X 64位
[免扣元素] 541款水果无底图PNG素材高像素高清水果图片免扣素材水果坚果
[软件工具] 正则表达式生成工具 v2.1 绿色免费版
[软件工具] 取色软件Pipette v21.5.5 中文绿色版 取色器
[后台模板] 基于bootstrap后台管理模板
[后台模板] 紫色渐变OA系统后台模板
[公司企业] 数字科技企业机构HTML5模板
[公司企业] 房产物业公司Bootstrap模板
[后台模板] 后台数据统计Bootstrap5模板

简介

Glide.js是一款轻盈灵活的jQuery滑块/转盘插件（ES6 JavaScript滑块/转盘库），可帮助您创建具有快速和高性能CSS3转换的响应式和触摸式滑块。

参见：

  • jQuery/JavaScript/CSS中的10个最佳旋转木马插件

特征：

  • 重量轻且易于使用
  • 模块化和可扩展。
  • 支持触摸设备上的滑动事件
  • 箭头、项目符号和键盘导航
  • 自动播放
  • 悬停时暂停
  • CSS3通过回退转换到较旧的浏览器
  • 支持几乎所有的html元素
  • 跨浏览器，支持所有现代网络/移动浏览器

如何使用它:

1.使用NPM安装并下载库。

  1. # NPM
  2. $ npm install @glidejs/glide --save

2.将Glide.js导入到您的项目中。

  1. // Core Stylesheet
  2. @import "node_modules/@glidejs/glide/src/assets/sass/glide.core";
  3. // Theme Stylesheet
  4. @import "node_modules/@glidejs/glide/src/assets/sass/glide.theme";
  5.  
  6. import Glide from '@glidejs/glide'

3.或者直接加载文档中的JavaScript和CSS文件。

  1. <!-- Local -->
  2. <link rel="stylesheet" href="dist/css/glide.core.min.css">
  3. <link rel="stylesheet" href="dist/css/glide.theme.min.css">
  4. <script src="dist/glide.min.js"></script>
  5.  
  6. <!-- CDN -->
  7. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@glidejs/[email protected]/dist/css/glide.core.min.css">
  8. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@glidejs/[email protected]/dist/css/glide.theme.min.css">
  9. <script src="https://cdn.jsdelivr.net/npm/@glidejs/[email protected]/dist/glide.min.js"></script>

4.为幻灯片、分页项目符号和导航箭头创建html。

  1. <div class="glide">
  2.   <!-- Slides here -->
  3.   <div class="glide__track" data-glide-el="track">
  4.     <ul class="glide__slides">
  5.       <li class="glide__slide">Slide 1</li>
  6.       <li class="glide__slide">Slide 2</li>
  7.       <li class="glide__slide">Slide 3</li>
  8.     </ul>
  9.   </div>
  10.   <!-- Navigation -->
  11.   <div class="glide__arrows" data-glide-el="controls">
  12.     <button class="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button>
  13.     <button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
  14.   </div>
  15.   <!-- Pagination -->
  16.   <div class="glide__bullets" data-glide-el="controls[nav]">
  17.     <button class="glide__bullet" data-glide-dir="=0"></button>
  18.     <button class="glide__bullet" data-glide-dir="=1"></button>
  19.     <button class="glide__bullet" data-glide-dir="=2"></button>
  20.   </div>
  21. </div>

5.为滑块创建自定义控件（可选）。

  1. <div data-glide-el="controls">
  2.   <button data-glide-dir="<">Previous</button>
  3.   <button data-glide-dir=">">Next</button>
  4.   <button data-glide-dir="<<">First</button>
  5.   <button data-glide-dir=">>">Last</button>
  6.   <button data-glide-dir="=1">Goto The Slide 2</button>
  7. </div>

6.使用默认设置初始化Glide.js。就是这样。

  1. new Glide('.glide').mount();

7.自定义滑块的可能选项。

  1. new Glide('.glide', {
  2.  
  3.     // Auto change slides after specifed interval.
  4.     autoplay: 4000,
  5.  
  6.     // Slider type. 
  7.     // carousel, slider or slideshow.
  8.     type: 'carousel',
  9.  
  10.     // Start slider at specifed slide number.
  11.     startAt: 1,
  12.  
  13.     // Pause autoplay on mouseover the slider.
  14.     hoverpause: true,
  15.  
  16.     // Change slide on left/right keyboard arrow press.
  17.     keyboard: true,
  18.  
  19.     // The number of slides to show per screen
  20.     perView: 1,
  21.  
  22.     // 'center' or 1,2,3...
  23.     focusAt: 0,
  24.  
  25.     // Space between slides
  26.     gap: 10,
  27.  
  28.     // Stop running perView number of slides from the end
  29.     bound: false,
  30.  
  31.     // Minimal touch-swipe distance to need to change slide. 
  32.     // False for turning off touch.
  33.     swipeThreshold: 80,
  34.  
  35.     // Maximum number of slides moved per single swipe or drag
  36.     perTouch: false,
  37.  
  38.     // Alternate moving distance ratio of swiping and dragging
  39.     touchRatio: .5,
  40.  
  41.     // Angle required to activate slides moving
  42.     touchAngle: 45,
  43.  
  44.     // Minimal drag distance to need to change slide. 
  45.     // False for turning off drag.
  46.     dragThreshold: 120,
  47.  
  48.     // Animation duration in ms.
  49.     animationDuration: 400,
  50.  
  51.     // Animation easing CSS function.
  52.     animationTimingFunc: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',
  53.  
  54.     // Call the resize events at most once per every wait in milliseconds.
  55.     throttle: 16,
  56.  
  57.     // Enable infinite loop on slider type
  58.     rewind: true,
  59.  
  60.     // Duration of the rewinding animation
  61.     rewindDuration: 800,
  62.  
  63.     // 'ltr' or 'rtl'
  64.     direction: 
  65.  
  66.     // The value of the future viewports which have to be visible in the current view
  67.     // e.g. 100 or { before: 100, after: 50 }
  68.     peek: 0,
  69.  
  70.     // Options applied at specified media breakpoints
  71.     breakpoints: {},
  72.  
  73.     // Default CSS classes
  74.     classes: {
  75.       direction: {
  76.         ltr: 'glide--ltr',
  77.         rtl: 'glide--rtl'
  78.       },
  79.       slider: 'glide--slider',
  80.       carousel: 'glide--carousel',
  81.       swipeable: 'glide--swipeable',
  82.       dragging: 'glide--dragging',
  83.       cloneSlide: 'glide__slide--clone',
  84.       activeNav: 'glide__bullet--active',
  85.       activeSlide: 'glide__slide--active',
  86.       disabledArrow: 'glide__arrow--disabled'
  87.     }
  88.     
  89. })

8.属性和API方法。

  1. // the current slide index
  2. glide.index
  3.  
  4. // get the option value
  5. glide.settings.OptName
  6.  
  7. // get the slider type
  8. glide.type
  9.  
  10. // get the slider status
  11. glide.disabled
  12.  
  13. // enable the slider
  14. glide.mount();
  15.  
  16. // update the option
  17. glide.update({ options here });
  18.  
  19. // play the slider
  20. glide.play();
  21.  
  22. // pause the slider
  23. glide.pause();
  24.  
  25. // enable the slider
  26. glide.enable();
  27.  
  28. // disable the slider
  29. glide.disable();
  30.  
  31. // destroy the slider
  32. glide.destroy();
  33.  
  34. // go to the next slide
  35. // see more in the controls section
  36. glide.go('>');
  37.  
  38. // check the slider type
  39. glide.isType('slider');
  40. glide.isType('carousel');

9.事件处理程序。

  1. glide.on('mount.before', function() {
  2.   // befoure mount
  3. })
  4.  
  5. glide.on('mount.after', function() {
  6.   // after mount
  7. })
  8.  
  9. glide.on('update', function() {
  10.   // after the settings changed
  11. })
  12.  
  13. glide.on('play', function() {
  14.   // when playing
  15. })
  16.  
  17. glide.on('pause', function() {
  18.   // when paused
  19. })
  20.  
  21. glide.on('build.before', function() {
  22.   // before setting up a slider to its initial state
  23. })
  24.  
  25. glide.on('build.bafter', function() {
  26.   // after setting up a slider to its initial state
  27. })
  28.  
  29. glide.on('run.before', function(move) {
  30.   // before running
  31. })
  32.  
  33. glide.on('run', function(move) {
  34.   // when running
  35. })
  36.  
  37. glide.on('run.after', function(move) {
  38.   // after running
  39. })
  40.  
  41. glide.on('run.offset', function(move) {
  42.   // after calculating new index and making a transition
  43. })
  44.  
  45. glide.on('run.start', function(move) {
  46.   // after calculating the new index, but before making a transition
  47. })
  48.  
  49. glide.on('run.end', function(move) {
  50.   // after calculating the new index, but before making a transition
  51. })
  52.  
  53. glide.on('move', function(movement) {
  54.   // on move
  55. })
  56.  
  57. glide.on('move.after', function(movement) {
  58.   // after moving
  59. })
  60.  
  61. glide.on('resize', function() {
  62.   // on window resize
  63. })
  64.  
  65. glide.on('swipe.start', function() {
  66.   // swipe.start
  67. })
  68.  
  69. glide.on('swipe.move', function() {
  70.   // swipe.move
  71. })
  72.  
  73. glide.on('swipe.end', function() {
  74.   // swipe.end
  75. })
  76.  
  77. glide.on('translate.jump', function(movement) {
  78.   // before a translate applies
  79. })

更新日志：

版本3.6.0（2022-09-27）

  • 壮举：添加toArray函数将NodeList转换为Array
  • 删除不推荐使用的event.keyCode并替换为event.code
  • 添加package.json“类型”字段

v3.5.2 (2021-11-29)

  • build：不要忽略NPM上的dist/folder，所以它在安装包后就可用了

v3.5.1 (2021-11-23)

  • 错误修复

v3.5.0 (2021-11-22)

  • 新克隆定量选项

第3.4.0版（2019-09-20）

  • 新克隆定量选项

第3.3.0版（2019-08-21）

  • 使现代化

2017-01-22

  • 修复了锚点和图像中默认事件的问题

2016-08-07

  • 只有1个图像时停止滑动

2016-06-05

  • [hotfix]调用destroy后调整仍然激发的大小

2016-03-17

  • v2.0.7版本

2016-02-05

  • 阻止移动设备上的多个滚动方向

2015-12-21

  • 固定项目符号的z索引

2015-11-08

  • 固定幻灯片不在手机上滑动

2015-11-06

  • v2.0.5版本

2015-08-22

  • 项目符号实时事件绑定

2015-08-12

  • 添加缺少的命名空间以调整大小。

2015-07-29

  • 填充选项句柄%，px，数值
  • 固定触摸冻结；性能修复

2015-07-22

  • v2.0.3版本

2015-07-13

  • 滑动选项回调
  • 触发器可以处理多个目标
  • 填充选项原点

2015-07-07

  • 已修复销毁方法。

2015-06-13

  • 触摸模块各种修复

2015-06-06

  • 防止拖动时单击锚点

2015-06-03

  • 触摸模块修复

2015-05-24

  • 修复多次绑定的触发器

2015-05-15

  • 增加了自动高度选项

2015-05-04

  • 修复了一些错误并改进了类型“滑块”

2015-04-30

  • 触摸模块修复和优化

2015-04-23

  • 2.0版本

2014-11-25

  • 单幻灯片错误修复
  • 增加了Bower支持

2014-07-12

  • 更新至v1.0.65

2014-02-26

  • 修复旧浏览器回退

2014-02-21

  • 修复了多个滑块和事件处理程序的改进

2014-02-20

  • 修复悬停时播放/暂停事件

2014-02-11

  • 修复了transition回调后的问题。

2014-02-02

  • 代码重构。可读性更强、模块化、标量化。
  • 添加圆形幻灯片更改
  • 重命名导航选项，确保进行更新。
  • 精细动画选项。现在通过插件选项设置。不再需要在css文件中设置转换。
  • 新的api方法.reinit（）。重建并重新计算滑块元素的尺寸。

2013-12-11

  • 扩展选项和错误修复

2013-12-06

  • 小修复：语法、清理

v1.0.4 (2013-11-04)

  • 精细滑动事件
  • 支持Opera 12。

预览截图

相关热词： Glide.js响应转换CSS3插件
上一篇：背景图像视差效果 最小旋转木马
下一篇：微小 SEO友好旋转木马jQuery插件 jCarouselLite

网站首页 | 关于我们 | 免责声明 | 网站建设 | 在线工具 | 网站地图

版权声明：本站发布的资源部分自互联网，所有资源版权归原作者所有。如果有侵犯到您的权益，请联系本站删除，谢谢合作！

Copyright 2018-2025 ©19jp.com All Rights Reserved. 陕ICP备16002142号-1