{"id":9526518,"url":"https://github.com/Geolage/SliderAwesome","last_synced_at":"2025-08-23T07:32:21.516Z","repository":{"id":239498667,"uuid":"103376780","full_name":"Geolage/SliderAwesome","owner":"Geolage","description":"A slider plugin full of various effects and styles that allows any customization.  一款可定制的风格效果多样的轮播图插件。","archived":false,"fork":false,"pushed_at":"2017-09-21T12:56:34.000Z","size":23533,"stargazers_count":206,"open_issues_count":1,"forks_count":96,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-05-23T04:05:03.695Z","etag":null,"topics":["front-end","javascript","jquery-plugin","slider","slider-plugin"],"latest_commit_sha":null,"homepage":"","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/Geolage.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":"2017-09-13T08:53:08.000Z","updated_at":"2023-08-27T07:00:54.000Z","dependencies_parsed_at":"2024-05-18T01:00:41.870Z","dependency_job_id":"c233beaa-addf-43e8-8105-7f8cba01e82a","html_url":"https://github.com/Geolage/SliderAwesome","commit_stats":null,"previous_names":["geolage/sliderawesome"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Geolage%2FSliderAwesome","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Geolage%2FSliderAwesome/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Geolage%2FSliderAwesome/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Geolage%2FSliderAwesome/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Geolage","download_url":"https://codeload.github.com/Geolage/SliderAwesome/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230589656,"owners_count":18249774,"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":["front-end","javascript","jquery-plugin","slider","slider-plugin"],"created_at":"2024-05-12T22:41:03.098Z","updated_at":"2024-12-21T04:30:44.591Z","avatar_url":"https://github.com/Geolage.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Get'em, get'em! SliderAwesome!\n\n#### More Than Awesome!  专注于更佳、更强，致力于更酷、更全、更友好！\n\n## About SliderAwesome\n\u003cb\u003eSliderAwesome\u003c/b\u003e is a quite awesome slider plugin full of various effects and styles that allows any customization. \u003cbr/\u003e\n\n\u003cb\u003eSliderAwesome\u003c/b\u003e 是一款颇为酷炫的可定制的附带多种效果且风格多样的轮播图插件。\n\nThanks for nivo-slider giving me such good inspiration! \n\n感谢nivo-slider带来诸多很不错的灵感！\n\nSliderAwesome这款插件吸收了其原有的轮播效果以及相关功能，在此基础上，加入了多种不同的风格元素，将会在相应的功能上获得更加良好的呈现效果，除此之外还对一些适应性内容进行了改善。\n\n\u003cp\u003e目前已经集成了近30种轮滑效果，后期将会加入更多酷炫的元素，当然不乏3D的哦！\u003c/p\u003e\n\u003cp\u003e现已实现基本的轮播效果，相关的caption、indicators、theme以及更多功能正在开发中，今后将会陆续更新。\u003c/p\u003e\n\n\u003cb\u003e一些想说的话\u003c/b\u003e\n\n由于现在只有我一个人在开发此插件，并且也不可能总有空余的时间去投入，所以希望有更多的开发者们加入，共同改造。\n\n目前手头上还有几个不错的轮播效果源码，但不多。如果您有不错的idea或者建议，烦请向我推荐哦！如果您不介意，就请加入进来一起开发吧！相信我们一定可以把这款插件开发得更加出色更加实用！\n\n在此欢迎更多的coder帮助开发，让此类插件更好地发挥开源众包的良好特性，使其更加受益于每一位工作者！\n\n## View\n\n现在已经实现的轮播效果有很多，下面将会列举几种主要的styles，具体的风格请查阅下文config中defaults对象的styles列表。\n\n\u003cb\u003eDefault style\u003c/b\u003e\n\n![Default style](https://github.com/Geolage/SliderAwesome/blob/master/screenshots/default.gif)\n\n\u003cb\u003eRandom style\u003c/b\u003e\n\n![Random style](https://github.com/Geolage/SliderAwesome/blob/master/screenshots/random.gif)\n\n\u003cb\u003eMain effects\u003c/b\u003e\n\n\"flickrSlices\"\n\n![fs](https://github.com/Geolage/SliderAwesome/blob/master/screenshots/fs.gif)\n\n\"flickrWiderSlices\"\n\n![fws](https://github.com/Geolage/SliderAwesome/blob/master/screenshots/fws.gif)\n\n\"shutters\"\n\n![shuffle](https://github.com/Geolage/SliderAwesome/blob/master/screenshots/shutters.gif)\n\n\"fade\"\n\n![fade](https://github.com/Geolage/SliderAwesome/blob/master/screenshots/fade.gif)\n\n\"scroll\"\n\n![scroll](https://github.com/Geolage/SliderAwesome/blob/master/screenshots/scroll.gif)\n\n\"shuffle\"\n\n![shuffle](https://github.com/Geolage/SliderAwesome/blob/master/screenshots/shuffle.gif)\n\n\"takeOut\"\n\n![takeout](https://github.com/Geolage/SliderAwesome/blob/master/screenshots/takeout.gif)\n\n\"shuffleAndTakeOut\"\n\n![sat](https://github.com/Geolage/SliderAwesome/blob/master/screenshots/sat.gif)\n\n\"randomGrids\"\n\n![rg](https://github.com/Geolage/SliderAwesome/blob/master/screenshots/rg.gif)\n\n\"boxesRain\"\n\n![br](https://github.com/Geolage/SliderAwesome/blob/master/screenshots/br.gif)\n\n\"flickrGridsUp\"\n\n![fgu](https://github.com/Geolage/SliderAwesome/blob/master/screenshots/fgu.gif)\n\n\"gridsShuffleUp\"\n\n![gsu](https://github.com/Geolage/SliderAwesome/blob/master/screenshots/gsu.gif)\n\n其它效果暂时省略，但都是根据上述styles设计实现的，细化到了某一个方向上（如左或右），因此更具有可定制化。\n\n除这些外，还有更多的轮播效果正在开发中，请留意后续更新。\n\n## Compatibility\n非常抱歉，目前只在Google Chrome上进行过测试，已经能够基本兼容。\n\n鉴于开发尚且进展不错，待各项基本工作完成后将会进行更大程度的兼容性测试。\n\n\n## Usage\n\n\u003cp\u003e\u003cb\u003e浏览器\u003c/b\u003e\u003c/p\u003e\n\n操作比较简单。首先在 html 中定义一个块元素并设置其id以告诉SliderAwesome将要渲染的区域。\n\n```\n\u003cdiv id=\"slider\" class=\"sa sa-slider\"\u003e\n    ...\n\u003c/div\u003e\n```\n\n接下来在内部放置一个ul列表，最好加上\"slider-list\"作为它的class，注意：此列表内必须含有你想要轮播的图片。\n\n```\n...\n \u003cul class=\"slider-list\"\u003e                            \n        \u003cli\u003e\u003cimg src=\"images/1.jpg\" alt=\"\" /\u003e\u003c/li\u003e   \n        \u003cli\u003e\u003cimg src=\"images/2.jpg\" alt=\"\" /\u003e\u003c/li\u003e   \n        \u003cli\u003e\u003cimg src=\"images/3.jpg\" alt=\"\" /\u003e\u003c/li\u003e   \n        \u003cli\u003e\u003cimg src=\"images/4.jpg\" alt=\"\" /\u003e\u003c/li\u003e   \n \u003c/ul\u003e\n...\n\n```\n\n其次加入相关的标签，对 css 和 js 文件进行引用，请注意引入顺序。\n\n在``\u003chead\u003e``里加入:\n\n```\n\u003clink rel=\"stylesheet\" href=\"SliderAwesome.css\" type=\"text/css\" /\u003e \n```\n在``\u003cbody\u003e``里的最后面加入：\n  \n```\n\u003cscript src=\"jquery.min.js\"\u003e\u003c/script\u003e  \n\u003cscript src=\"SliderAwesome.jquery.1.0.0.js\"\u003e\u003c/script\u003e\n```\n\n完成引用后，在js入口文件（比如main.js）（不建议在html的 `\u003cscript\u003e` ）中添加下列代码：\n\n```\n$(function(){\n    $('#id').sliderAwesome({options});  // id即渲染slider的块元素id，options为个人配置，具体请参照 #Config 。\n                                           e.g. $('#slider').sliderAwesome({effect:\"random\",delay:3000})\n})\n```\n\n关于钩子函数\"``` .sliderAwesome() ```\"的参数 ```options``` 的使用建议：\n\n``` effect: String || Array ``` 即effect后面可以选择String或者Array作为值的类型。\n\n当轮播效果仅为一种时，建议直接用String类型的值。如：```{effect:\"default\"}```，设置后slider将以\"default\"风格来轮播图片；\n\n当需要更多轮播效果时，可以使用Array类型的值。如：```{effect:[\"randomGrids\",\"boxesRain\"]}```，该配置表示slider将以\"randomGrids\"和\"boxesRain\"这两种风格随机轮播图片。\u003cbr /\u003e需要注意的是，当您使用此类型的值时，最好不要把\"default\"或是\"random\"放进列表中，否则将可能会导致slider不稳定。\n\n完成这些初始化内容后，即可刷新页面查看效果。\n\nAhhha! 怎么样，是不是pretty simple, pretty cool呢？ Say Awesome!\n\n## Config\n\u003cb\u003ehtml\u003c/b\u003e\n```\n\u003cdiv id=\"slider\" class=\"sa sa-slider\"\u003e              // 定义slider显示区域\n    \u003cul class=\"slider-list\"\u003e                        // 定义轮播图列表\n        \u003cli\u003e\u003cimg src=\"images/1.jpg\"\u003e\u003c/li\u003e   |\n        \u003cli\u003e\u003cimg src=\"images/2.jpg\"\u003e\u003c/li\u003e   |       // slider列表\n        \u003cli\u003e\u003cimg src=\"images/3.jpg\"\u003e\u003c/li\u003e   |          图片子元素\n        \u003cli\u003e\u003cimg src=\"images/4.jpg\"\u003e\u003c/li\u003e   |\n    \u003c/ul\u003e\n\u003c/div\u003e\n```\n\u003cb\u003esliderAwesome.defaults\u003c/b\u003e\n```\n$.fn.sliderAwesome.defaults = {\n        effect: 'default',          // 默认效果，值可为string或者array类型\n        slices: 15,                 // 切片数量\n        boxCols: 8,                 // 方块列数\n        boxRows: 4,                 // 方块行数\n        speed: 500,                 // 动画执行速度，ms为单位，数值越小速度越慢\n        delay: 5000,                // 轮播图延迟时长，即下一轮播图的等待时间\n        startSlide: 0,              // 开始播放的图片序号，以数组下标为准，0为起始点\n        clickNav: true,             // 是否激活鼠标点击控制左右切换功能\n        keyboardNav:false,          // 是否激活键盘左右键切换图片功能\n        indicator: true,            // 是否开启当前图片标识器（一般为小圈圈）\n        indicatorThumbs: false,     // 是否开启以标识器图片作为图标的功能\n        pauseOnHover: true,         // 是否激活鼠标悬停暂停图片轮播的功能    \n        preText: \"Pre\",             // 后退按钮文本\n        nextText: \"Next\",           // 前进按钮文本\n        randomStart: false,         // 是否随机选择轮播起始点\n        styles:[\"flickrSlices\", \"flickrSlicesLeft\" , \"flickrSlicesRight\" , \"shutters\" , \"shuttersLeft\" , \"shuttersRight\" , \"fade\" ,   \n                \"scroll\" , \"scrollLeft\" , \"scrollRight\" , \"shuffle\" , \"shuffleLeft\" , \"shuffleRight\" , \"takeOut\" , \"takeOutLeft\" , \n                \"takeOutRight\" ,   \"shuffleAndTakeOut\" , \"randomGrids\" , \"flickrWiderSlices\" , \"flickrWiderSlicesLeft\" , \n                \"flickrWiderSlicesRight\" , \"boxesRain\" , \"boxesRainLeft\" , \"boxesRainRight\" , \"flickrGridsUp\" , \"flickrGridsUpLeft\" , \n                \"flickrGridsUpRight\" , \"gridsShuffleUp\" , \"gridsShuffleUpLeft\" , \"gridsShuffleUpRight\"]       // slider风格列表\n};\n```\n\n#### More's coming soon ... \u003cbr/\u003e更多功能正在完善中 ... \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGeolage%2FSliderAwesome","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FGeolage%2FSliderAwesome","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGeolage%2FSliderAwesome/lists"}