{"id":25492234,"url":"https://github.com/athm-fe/slide","last_synced_at":"2025-11-08T21:30:24.708Z","repository":{"id":57099842,"uuid":"118753219","full_name":"athm-fe/slide","owner":"athm-fe","description":null,"archived":false,"fork":false,"pushed_at":"2018-06-15T03:50:06.000Z","size":30,"stargazers_count":0,"open_issues_count":1,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-13T20:07:53.531Z","etag":null,"topics":["jquery-plugin","slide"],"latest_commit_sha":null,"homepage":"https://athm-fe.github.io/slide/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/athm-fe.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-24T10:59:55.000Z","updated_at":"2018-06-15T03:49:55.000Z","dependencies_parsed_at":"2022-08-22T23:10:21.599Z","dependency_job_id":null,"html_url":"https://github.com/athm-fe/slide","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/athm-fe%2Fslide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/athm-fe%2Fslide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/athm-fe%2Fslide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/athm-fe%2Fslide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/athm-fe","download_url":"https://codeload.github.com/athm-fe/slide/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239561514,"owners_count":19659475,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jquery-plugin","slide"],"created_at":"2025-02-18T22:29:11.231Z","updated_at":"2025-11-08T21:30:24.640Z","avatar_url":"https://github.com/athm-fe.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Slide\n\n## TODO\n\n* Touch 支持\n\n## HTML 结构要求\n\n一般情况下使用 `.athm-slide-*` 风格的类名即可, 但是如果你有自定义的 class 名字，你可以通过配置 `data-slide-*` 风格的属性来配置对应的节点.\n\n```\n.athm-slide\n  .athm-slide__inner  // overflow: hidden\n    .athm-slide__track,[data-slide-track] // position: relative; width: 9999em;\n      \u003e .athm-slide__item,[data-slide-item] // float: left;\n        a \u003e img[title]\n      \u003e .athm-slide__item,[data-slide-item] // float: left;\n      \u003e .athm-slide__item,[data-slide-item] // float: left;\n      ...\n  .athm-slide__prev,[data-slide-prev]\n  .athm-slide__next,[data-slide-next]\n  .athm-slide__indicators,[data-slide-indicators]\n    \u003e a.active\n    \u003e a\n    \u003e a\n    ...\n  .athm-slide__title,[data-slide-title]\n    \u003e a\n```\n\n## Usage\n\n可以通过两种方式来初始化 Slide 控件, 你可以根据自己的需要来进行选择.\n\n```javascript\n$('#slide').slide(options);\n```\n\n```html\n\u003cdiv class=\"athm-slide\" data-toggle=\"slide\"\u003e\n  ...\n\u003c/div\u003e\n```\n\n## Options\n\n参数可以通过 data attributes 或者 JavaScript 两种方式来配置.\n\nName | Type | Default | Description\n---- | ---- | ------- | -----------\nfade | boolean | false | 是否开启 fade 模式\nduration | number | 400 | 动画的时长, 以毫秒为单位.\ninterval | number | 5000 | 自动播放间隔时间, 以毫秒为单位.\ncircle | boolean | true | 是否循环.\nautoplay | boolean | true | 是否开启自动轮播.\nkeyboard | boolean | false | 开启左右快捷键操作, 默认关闭.\npause | string or boolean | `'hover'` | 鼠标在区域内时暂停循环, 如果想取消改功能, 可以取值 `false` .\ntoggleButton | boolean | false | 鼠标移入时是否显示左右箭头.\nautoIndicators | boolean | false | 自动创建导航器\n\n## Methods\n\n### `.slide(options)`\n\n初始化当前 DOM 内容为一个 Slide , 可以接受参数进行配置.\n\n```javascript\n$('#slide').slide({});\n```\n\n### `.slide('next')`\n\n前进到下一帧.\n\n```javascript\n$('#slide').slide('next');\n```\n\n### `.slide('prev')`\n\n返回到上一帧.\n\n```javascript\n$('#slide').slide('prev');\n```\n\n### `.slide('pause')`\n\n暂停播放.\n\n```javascript\n$('#slide').slide('pause');\n```\n\n### `.slide('play')`\n\n开始播放.\n\n```javascript\n$('#slide').slide('play');\n```\n\n### `.slide(number)`\n\n前进到第几帧(从1开始).\n\n```javascript\n$('#slide').slide(3);\n```\n\n### `.slide('destroy')`\n\n销毁轮播控件.\n\n```javascript\n$('#slide').slide('destroy');\n```\n\n\n## Event\n\nEvent Type | Description\n---------- | -----------\ninit.fe.slide | 初始化时触发.\nslide.fe.slide | 开始切换到下一帧时, 此事件会立即触发.\nslid.fe.slide | 切换完毕时触发.\nfirstSlide.fe.slide | 开始切换到第一帧时触发, 仅限 `circle: false`.\nfirstSlid.fe.slide | 完成切换到第一帧时触发, 仅限 `circle: false`.\nlastSlide.fe.slide | 开始切换到最后一帧时触发, 仅限 `circle: false`.\nlastSlid.fe.slide | 完成切换到最后一帧时触发, 仅限 `circle: false`.\n\n```javascript\n$('#slide').on('slid.fe.slide', function (e, slide) {\n  // 打印当前是第几帧\n  console.log('slid', slide.number);\n});\n```\n\n# End\n\nThanks to [Bootstrap](http://getbootstrap.com/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fathm-fe%2Fslide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fathm-fe%2Fslide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fathm-fe%2Fslide/lists"}