{"id":18761986,"url":"https://github.com/codegather/touchslider","last_synced_at":"2025-09-11T08:39:06.094Z","repository":{"id":109558078,"uuid":"148571006","full_name":"CodeGather/touchslider","owner":"CodeGather","description":"TouchSlider是一个轻量级的javascript组件，设计的目的是提供一个可以方便实现全平台（PC及移动端触摸界面）的幻灯slider效果。","archived":false,"fork":false,"pushed_at":"2018-09-13T03:02:14.000Z","size":220,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-02T09:27:21.694Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/CodeGather.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-09-13T02:34:53.000Z","updated_at":"2024-10-23T12:24:29.000Z","dependencies_parsed_at":"2023-03-13T14:09:22.192Z","dependency_job_id":null,"html_url":"https://github.com/CodeGather/touchslider","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/CodeGather/touchslider","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeGather%2Ftouchslider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeGather%2Ftouchslider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeGather%2Ftouchslider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeGather%2Ftouchslider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodeGather","download_url":"https://codeload.github.com/CodeGather/touchslider/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeGather%2Ftouchslider/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274602518,"owners_count":25315202,"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","status":"online","status_checked_at":"2025-09-11T02:00:13.660Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-07T18:18:31.825Z","updated_at":"2025-09-11T08:39:06.035Z","avatar_url":"https://github.com/CodeGather.png","language":"JavaScript","readme":"TouchSlider\n===========\n\u003e **与 [pageSwitch.js](https://github.com/qiqiboy/pageSwitch) 的区别**  \npageSwitch.js适用场景为全屏切换，即一切一屏，并且在此基础上实现了超过一百种切换效果。而TouchSlider.js则侧重于在滑动效果下，不仅支持全屏切换，还支持不固定尺寸的幻灯切换。  \n具体使用请参看各组件所提供的示例。\n\nTips: v2版为重构版，提高了代码质量，也优化了性能。参数格式有所调整，如果是由旧版本更新，则注意修改调用的参数。\n\n## 无法滑动？\n\n最新版本的chrome的实现了pointer事件，pageSwitch会优先使用pointer事件，但是会和系统触摸滚动冲突。\n解决该问题，可以通过对滚动容器设置 [touch-action](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) 样式来fix。\n```scss\n.my-slider-container {\n    touch-action: pan-y; //横向滚动时 or\n    touch-action: pan-x; //纵向滑动时\n}\n```\n##安装\n\n    npm install touchslider\n\n## 如何使用\n```javascript\n// 如果使用webpack或者requirejs或者browserify等构建工具，可以这样：\nvar TouchSlider = require('touchslider');\n\n// 也可以直接在下载本文件，直接在页面中引入\n\nvar ts=new TouchSlider('container id',{\n\tduration:600,\t\t\t//int 页面过渡时间\n\tdirection:1,\t\t\t//int 页面切换方向，0横向，1纵向\n\tstart:0,\t\t\t//int 默认显示页面\n\talign:'center',\t\t\t//string 对齐方式，left(top) center(middle) right(bottom)\n\tmouse:true,\t\t\t//bool 是否启用鼠标拖拽\n\tmousewheel:false,\t\t//bool 是否启用鼠标滚轮切换\n\tarrowkey:false,\t\t\t//bool 是否启用键盘方向切换\n\tfullsize:true,\t\t\t//bool 是否全屏幻灯（false为自由尺寸幻灯）\n\tautoplay:true,\t    \t\t//bool 是否自动播放幻灯\n\tinterval:int\t\t\t//bool 幻灯播放时间间隔\n});\n\n//调用方法\nts.prev(); \t\t\t\t//上一张\nts.next();\t\t\t\t//下一张\nts.slide(n);\t\t\t\t//第n张\n\nts.play();\t\t\t    \t//播放幻灯\nts.pause();\t\t        \t//暂停幻灯\n\nts.prepend(DOM_NODE);\t\t\t//前增页面\nts.append(DOM_NODE);\t\t\t//后增页面\nts.insertBefore(DOM_NODE,index);\t//在index前添加\nts.insertAfter(DOM_NODE,index);\t\t//在index后添加\nts.remove(index);\t\t\t//删除第index页面\nts.isStatic();\t\t\t\t//是否静止状态\n\nts.destroy();\t\t\t\t//销毁TouchSlider效果对象\n\n/* 事件绑定\n * event可选值:\n * \n * before 页面切换前\n * after 页面切换后\n * dragStart 开始拖拽\n * dragMove 拖拽中\n * dragEnd 结束拖拽\n */\nts.on(event,callback);\n````\n\n## 兼容性\n兼容全平台，包括IE6+\n\n## demo地址\n请点击https://codegather.github.io/touchslider/\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodegather%2Ftouchslider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodegather%2Ftouchslider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodegather%2Ftouchslider/lists"}