{"id":13565496,"url":"https://github.com/ruyadorno/simple-slider","last_synced_at":"2025-05-16T04:05:42.539Z","repository":{"id":8590929,"uuid":"10225284","full_name":"ruyadorno/simple-slider","owner":"ruyadorno","description":":carousel_horse: The 1kb JavaScript Carousel","archived":false,"fork":false,"pushed_at":"2023-03-01T15:37:04.000Z","size":2645,"stargazers_count":617,"open_issues_count":17,"forks_count":61,"subscribers_count":26,"default_branch":"master","last_synced_at":"2025-05-09T03:08:19.424Z","etag":null,"topics":["carousel","html","javascript","javascript-carousel","js","micro-library","slide","slide-transitions","slider","transition-animation"],"latest_commit_sha":null,"homepage":"https://ruyadorno.github.com/simple-slider","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"lodash/lodash","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ruyadorno.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2013-05-22T17:09:13.000Z","updated_at":"2025-04-23T07:25:14.000Z","dependencies_parsed_at":"2024-01-07T04:47:57.417Z","dependency_job_id":null,"html_url":"https://github.com/ruyadorno/simple-slider","commit_stats":{"total_commits":256,"total_committers":9,"mean_commits":"28.444444444444443","dds":0.08203125,"last_synced_commit":"001a297ecf78b5a41994ca85fd610f7b7c67996c"},"previous_names":["ruyadorno/simpleslider"],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruyadorno%2Fsimple-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruyadorno%2Fsimple-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruyadorno%2Fsimple-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruyadorno%2Fsimple-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ruyadorno","download_url":"https://codeload.github.com/ruyadorno/simple-slider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254464895,"owners_count":22075570,"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":["carousel","html","javascript","javascript-carousel","js","micro-library","slide","slide-transitions","slider","transition-animation"],"created_at":"2024-08-01T13:01:48.425Z","updated_at":"2025-05-16T04:05:37.524Z","avatar_url":"https://github.com/ruyadorno.png","language":"JavaScript","funding_links":[],"categories":["JavaScript",":clap: 欢迎参与​","UI Components"],"sub_categories":["工具库","Carousels"],"readme":"# simple-slider\n\n[![NPM version](https://badge.fury.io/js/simple-slider.svg)](https://npmjs.org/package/simple-slider)\n[![CDNJS version](https://img.shields.io/cdnjs/v/simple-slider.svg)](https://cdnjs.com/libraries/simple-slider)\n[![Build Status](https://travis-ci.org/ruyadorno/simple-slider.svg?branch=master)](https://travis-ci.org/ruyadorno/simple-slider)\n![File Size: \u003c 1.1kB gzipped](http://img.badgesize.io/ruyadorno/simple-slider/master/dist/simpleslider.min.js?compression=gzip)\n[![license](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](https://raw.githubusercontent.com/ruyadorno/simple-slider/master/LICENSE)\n[![Join the chat at https://gitter.im/simple-slider/Lobby](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/simple-slider/Lobby)\n\nhttps://ruyadorno.github.io/simple-slider\n\nExtremely lightweight carousel micro library.\n\n[![Build Status](https://saucelabs.com/browser-matrix/ruyadorno-3.svg)](https://saucelabs.com/beta/builds/533bdd25630b4472a05f128b0c47e91f)\n\n## About\n\n**simple-slider** is a carousel micro library based on the [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) API. It makes for a highly testable implementation and less css-dependent.\n\nThis package contains a framework agnostic implementation. If you are using **AngularJS** or **Polymer** there are some **simple-slider** framework-specific implementations available:\n\n- [angular-simple-slider](https://github.com/ruyadorno/angular-simple-slider)\n- [polymer-simple-slider](https://github.com/ruyadorno/polymer-simple-slider)\n\n\n## Features\n\n- Small size, less than 1.1kb minified/gzipped\n- Support to [UMD](https://github.com/umdjs/umd): AMD, CommonJS and global definition\n- Uses [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) for animations\n- Supports [Page visibility API](https://developer.mozilla.org/en-US/docs/Web/Events/visibilitychange) to pause/resume transitions when user navigates away from the page\n- Accept [ease functions](https://github.com/jimjeffers/Easie/blob/master/easie.js) to customize the transition animation\n- Lots of ready-to-use examples available, just check the [example](./examples/) folder\n- Animates any numerical css property\n\n\n## Install\n\nAvailable on **npm**:\n\n```sh\nnpm install --save simple-slider\n```\n\nand you can also get it on **Bower**:\n\n```sh\nbower install --save simple-slider\n```\n\n### Getting it from cdnjs\n\nThis library is also available on https://cdnjs.com/ you can use it just by importing:\n\n- Minified version: https://cdnjs.cloudflare.com/ajax/libs/simple-slider/1.0.0/simpleslider.min.js\n- Unminified version: https://cdnjs.cloudflare.com/ajax/libs/simple-slider/1.0.0/simpleslider.js\n\n\n## Usage\n\nSimply import the script in your html and call the `simpleslider.getSlider` function.\n\n```html\n\u003cdiv style=\"width:612px; height:612px\" data-simple-slider\u003e\n  \u003cimg src=\"https://picsum.photos/612/612?random=1\"/\u003e\n  \u003cimg src=\"https://picsum.photos/612/612?random=2\"/\u003e\n\u003c/div\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/simple-slider/1.0.0/simpleslider.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  simpleslider.getSlider();\n\u003c/script\u003e\n```\n\n*In this previous example we didn't specified any additional option, in this case the slider will use its default left-to-right sliding animation and the container element will be the first element containing a `data-simple-slider` attribute.*\n\n### Usage in a CommonJS environment\n\n```js\nvar simpleslider = require('simple-slider');\n\nsimpleslider.getSlider();\n```\n\n### ES2015+ environments\n\n```js\nimport { getSlider } from 'simple-slider/src';\n\ngetSlider();\n```\n\n### RequireJS/AMD environment\n\n```js\nrequire(['simple-slider'], function(simpleslider) {\n  simpleslider.getSlider();\n});\n```\n\n\n## Options\n\nOptions are set as named properties of a single parameter accepted by the `getSlider` function, they help you customize the slider transition and how it's going to work.\n\nThe main option is a `container` element, this will usually be a `\u003cdiv\u003e` or `\u003cul\u003e` containing the elements to be transitioned, keep in mind that this container should also have a defined width/height value. You can also tweak things such as the delay time between each transition, how long each transition will take, etc.\n\n```html\n\u003cdiv id=\"myslider\" style=\"width:612px; height:612px\"\u003e\n  \u003cimg src=\"https://picsum.photos/612/612?random=1\"/\u003e\n  \u003cimg src=\"https://picsum.photos/612/612?random=2\"/\u003e\n\u003c/div\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/simple-slider/1.0.0/simpleslider.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  simpleslider.getSlider({\n    container: document.getElementById('myslider'),\n    transitionTime:1,\n    delay:3.5\n  });\n\u003c/script\u003e\n```\n\n### Available Options\n\nHere is the list of available values to customize how your slider is going to work:\n\n- **container**: \u003c[Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)\u003e The HTML element that act as a container for the slider. Defaults to `document.querySelector('*[data-simple-slider])`.\n- **children** \u003c[NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList)/Array\u003e A list of children to be used as slides, you can use the [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) to have more flexibility on what children of the `container` element should be used as slides. Defaults to `container.children`.\n- **paused**: \u003cBoolean\u003e Controls carousel auto-transition/slideshow. If value is `true` no transition will happen. Defaults to `false`.\n- **prop**: \u003cString\u003e Determines the css property to be animated. Defaults to `left`.\n- **duration**: \u003cNumber\u003e Value setting the duration of animation transition. Defaults to `0.5`.\n- **delay**: \u003cNumber\u003e Value determining the wait between each animation when auto-transition is enabled. Defaults to `3` seconds.\n- **init**: \u003cString/Number\u003e Initial value of slide elements when starting a transition animation. Defaults to `-100`.\n- **show**: \u003cString/Number\u003e The value a slide element should have when it is displayed. Defaults to `0`.\n- **end**: \u003cString/Number\u003e The value a slide will move to during a transition animation. Defaults to `100`.\n- **unit**: \u003cString\u003e The css unit value to be used. Defaults to `%`.\n- **ease**: \u003cFunction\u003e An ease function, you can use any of [these](https://github.com/jimjeffers/Easie/blob/master/easie.js). Defaults to `defaultEase` internal function.\n- **onChange**: \u003cFunction\u003e A callback function to be invoked each time a slide changes.\n- **onChangeEnd**: \u003cFunction\u003e A callback function to be invoked at the end of the slide transition\n\n### Default values\n\n```js\n{\n  container: document.querySelector('*[data-simple-slider]'),\n  children: container.children,\n  paused: false,\n  prop: 'left',\n  duration: 0.5,\n  delay: 3,\n  init: -100,\n  show: 0,\n  end: 100,\n  unit: '%',\n  ease: defaultEase function,\n  onChange: undefined,\n  onChangeEnd: undefined\n}\n```\n\n\n## Programmatic API\n\nSome methods are exposed by the returning value of the function allowing you to control the slider.\n\n```html\n\u003cdiv id=\"myslider\" style=\"width:612px; height:612px\"\u003e\n  \u003cimg src=\"http://placekitten.com/g/612/612\"/\u003e\n  \u003cimg src=\"http://placekitten.com/g/612/613\"/\u003e\n\u003c/div\u003e\n\u003cscript src=\"../dist/simpleslider.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  var currentIndex;\n\n  function updateCurrentIndex() {\n    currentIndex = slider.currentIndex();\n  }\n\n  var slider = simpleslider.getSlider({\n    container: document.getElementById('myslider'),\n    onChangeEnd: updateCurrentIndex\n  });\n\n  // pauses slideshow\n  slider.pause();\n\u003c/script\u003e\n```\n\n### Available methods:\n\n- `currentIndex()` Returns the index of the current displaying image.\n- `pause()` Pauses the slideshow.\n- `resume()` Resumes the slideshow.\n- `reverse()` Swaps `init` for `end` and reverses the order of slides.\n- `nextIndex()` Gets the index of the next slide to be shown.\n- `prevIndex()` Gets the index of the previous slide.\n- `next()` Switches displaying image to the next one.\n- `prev()` Switches displaying image to the previous one.\n- `change(index)` Changes image to a given `index` value.\n- `dispose()` Disposes of all internal variable references.\n\n\n## More examples\n\n- [Responsive layout example](./examples/responsive-layout-example.html)\n- [Default slider with no options](./examples/no-options.html)\n- [Default slider with options](./examples/default-sliding-transition.html)\n- [Fading/Opacity transition](./examples/fading-transition.html)\n- [Full page transition](./examples/full-page-transition.html)\n- [Lightbox integrated](./examples/lightbox-integrated-example.html)\n- [Mask sliding transition](./examples/mask-sliding-transition.html)\n- [Pause slide](./examples/pause-slide-change-example.html)\n- [RequireJS usage](./examples/requirejs-example.html)\n- [Reverse sliding direction](./examples/reverse-sliding-direction-example.html)\n- [Right to left sliding transition](./examples/right-to-left-sliding-transition.html)\n- [Slides containing no images](./examples/text-content-example.html)\n- [Top to bottom transition](./examples/top-to-bottom-sliding-transition.html)\n- [Touch swipe example](./examples/touch-swipe-example.html)\n- [Custom ease animation](./examples/custom-ease-animation-example.html)\n\n\n## [Documentation](https://ruyadorno.github.io/simple-slider/docs/)\n\nExtensive documentation of the options and methods can be found at the [simple-slider official documentation](https://ruyadorno.github.io/simple-slider/docs/).\n\n\n## Alternatives\n\nA JavaScript carousel micro library is not a new thing (fun fact, **simple-slider** has been around [since 2013](https://github.com/ruyadorno/simple-slider/commit/1e54f82536e5e1ef047445ab705c674cff3db9ee)).\n\nI would recommend that you take a look at some of the available alternatives and decide by yourself which one better suits your needs.\n\n- [slick](https://github.com/kenwheeler/slick)\n- [lory](https://github.com/meandmax/lory)\n- [siema](https://pawelgrzybek.com/siema/)\n- [Swiper](https://github.com/nolimits4web/Swiper)\n- [iSlider](https://github.com/BE-FE/iSlider)\n- [Owl Carousel](https://github.com/OwlCarousel2/OwlCarousel2)\n- [flickity](https://github.com/metafizzy/flickity)\n- [swipe](https://github.com/lyfeyaj/swipe)\n- [unslider](https://github.com/idiot/unslider)\n- [Glide](https://github.com/jedrzejchalubek/glidejs)\n\n\n## License\n\nMIT © [Ruy Adorno](http://ruyadorno.com)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruyadorno%2Fsimple-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fruyadorno%2Fsimple-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruyadorno%2Fsimple-slider/lists"}