{"id":13824138,"url":"https://github.com/pawelgrzybek/siema","last_synced_at":"2025-05-13T21:07:17.034Z","repository":{"id":38326143,"uuid":"74846587","full_name":"pawelgrzybek/siema","owner":"pawelgrzybek","description":"Siema - Lightweight and simple carousel in pure JavaScript","archived":false,"fork":false,"pushed_at":"2024-09-23T06:20:53.000Z","size":28333,"stargazers_count":3489,"open_issues_count":62,"forks_count":401,"subscribers_count":49,"default_branch":"master","last_synced_at":"2025-04-28T12:07:59.885Z","etag":null,"topics":["carousel","javascript"],"latest_commit_sha":null,"homepage":"https://pawelgrzybek.github.io/siema/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pawelgrzybek.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2016-11-26T19:38:41.000Z","updated_at":"2025-04-24T16:06:44.000Z","dependencies_parsed_at":"2022-07-11T00:30:23.665Z","dependency_job_id":"20577ff7-419b-476b-87df-1d99d7c9410c","html_url":"https://github.com/pawelgrzybek/siema","commit_stats":{"total_commits":270,"total_committers":17,"mean_commits":"15.882352941176471","dds":0.08518518518518514,"last_synced_commit":"cf1553d2eeb40ab17d164dcf265ba97a4e56170d"},"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pawelgrzybek%2Fsiema","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pawelgrzybek%2Fsiema/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pawelgrzybek%2Fsiema/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pawelgrzybek%2Fsiema/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pawelgrzybek","download_url":"https://codeload.github.com/pawelgrzybek/siema/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251311330,"owners_count":21569009,"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","javascript"],"created_at":"2024-08-04T09:00:57.449Z","updated_at":"2025-04-28T12:08:13.562Z","avatar_url":"https://github.com/pawelgrzybek.png","language":"JavaScript","funding_links":[],"categories":["Carousel","JavaScript"],"sub_categories":[],"readme":"**Hi. I will be discontinuing active maintenance of Siema. I built it by myself to use on one of my projects. Two years later I consider carousels as an anti-pattern and I would suggest you to find a better UI pattern than carousel for your current project. If you really want to use it, feel free. If you have any questions, please look for the answer in closed issues section. Would you like to contribute or coutinue maintenance of Siema? Fantastic!**\n\n- - -\n\n# Siema - Lightweight and simple carousel with no dependencies\n\nFull docs with examples: [https://pawelgrzybek.github.io/siema/](https://pawelgrzybek.github.io/siema/).\n\nSiema is a lightweight (only 3kb gzipped) carousel plugin with no dependencies and no styling. As Brad Frost once said \"do that shit yourself\". It is 100% open source and [available on Github](https://github.com/pawelgrzybek/siema). It is free to use on personal and commercial projects. Use it with your favourite module bundler or by manually injecting the script into your project.\n\n## Installation\n\nSetup is trivially easy. A little bit of markup...\n\n```html\n\u003cdiv class=\"siema\"\u003e\n  \u003cdiv\u003eHi, I'm slide 1\u003c/div\u003e\n  \u003cdiv\u003eHi, I'm slide 2\u003c/div\u003e\n  \u003cdiv\u003eHi, I'm slide 3\u003c/div\u003e\n  \u003cdiv\u003eHi, I'm slide 4\u003c/div\u003e\n\u003c/div\u003e\n```\n\nIf you are using a module bundler like Webpack or Browserify...\n\n```\nyarn add siema\n```\n\n```js\nimport Siema from 'siema';\nnew Siema();\n```\n\n...or manually inject the minified script into your website.\n\n```html\n\u003cscript src=\"siema.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  new Siema();\n\u003c/script\u003e\n```\n\n## Options\n\nSiema comes with a few (optional) settings that you can change by passing an object as an argument. Default values are presented below.\n\n```js\nnew Siema({\n  selector: '.siema',\n  duration: 200,\n  easing: 'ease-out',\n  perPage: 1,\n  startIndex: 0,\n  draggable: true,\n  multipleDrag: true,\n  threshold: 20,\n  loop: false,\n  rtl: false,\n  onInit: () =\u003e {},\n  onChange: () =\u003e {},\n});\n```\n\n**`selector`** (string or DOM element)  \nThe selector to use as a carousel. Siema will use all immediate children of this selector as a slider items. It can be a query string [(example)](http://codepen.io/pawelgrzybek/pen/QvLjxY) or DOM element [(example)](http://codepen.io/pawelgrzybek/pen/gWYaje).\n\n**`duration`** (number)  \nSlide transition duration in milliseconds [(example)](http://codepen.io/pawelgrzybek/pen/BRBoqO).\n\n**`easing`** (string)  \nIt is like a CSS `transition-timing-function` — describes acceleration curve [(example)](http://codepen.io/pawelgrzybek/pen/aWovrB).\n\n**`perPage`** (number or object)  \nThe number of slides to be shown. It accepts a number [(example)](http://codepen.io/pawelgrzybek/pen/bWbVXz) or an object [(example)](http://codepen.io/pawelgrzybek/pen/dWbGyZ) for complex responsive layouts.\n\n**`startIndex`** (number)  \nIndex (zero-based) of the starting slide [(example)](http://codepen.io/pawelgrzybek/pen/vmBLER).\n\n**`draggable`** (boolean)  \nUse dragging and touch swiping [(example)](http://codepen.io/pawelgrzybek/pen/mmbVVj).\n\n**`multipleDrag`** (boolean)  \nAllow dragging to move multiple slides.\n\n**`threshold`** (number)  \nTouch and mouse dragging threshold (in px) [(example)](http://codepen.io/pawelgrzybek/pen/gWYPrQ).\n\n**`loop`** (boolean)  \nLoop the slides around [(example)](http://codepen.io/pawelgrzybek/pen/zwOrKN).\n\n**`rtl`** (boolean)  \nEnables layout for languages written from right to left (like Hebrew or Arabic) [(example)](https://codepen.io/pawelgrzybek/pen/XZNEgd).\n\n**`onInit`** (function)  \nRuns immediately after initialization [(example)](http://codepen.io/pawelgrzybek/pen/BRBjpE).\n\n**`onChange`** (function)  \nRuns after slide change [(example)](http://codepen.io/pawelgrzybek/pen/RVbrVe).\n\n## API\n\nAs mentioned above, Siema doesn't come with many options - just a few useful methods. Combine it with some very basic JavaScript and voila!\n\n**`prev(howManySlides = 1, callback)`**  \nGo to previous item [(example)](http://codepen.io/pawelgrzybek/pen/JNPKVE). Optionally slide few items backward by passing `howManySlides` (number) argument [(example)](http://codepen.io/pawelgrzybek/pen/wdwWZQ). Optional `callback` (function) available as a third argument [(example)](http://codepen.io/pawelgrzybek/pen/JNPKQW).\n\n**`next(howManySlides = 1, callback)`**  \nGo to next item [(example)](http://codepen.io/pawelgrzybek/pen/JNPKVE). Optionally slide few items forward by passing `howManySlides` (number) argument [(example)](http://codepen.io/pawelgrzybek/pen/wdwWZQ). Optional `callback` (function) available as a third argument [(example)](http://codepen.io/pawelgrzybek/pen/JNPKQW).\n\n**`goTo(index, callback)`**  \nGo to item at particular `index` (number) [(example)](http://codepen.io/pawelgrzybek/pen/gWYLXP). Optional `callback` (function) available as a second argument [(example)](http://codepen.io/pawelgrzybek/pen/ZKzBvo).\n\n**`remove(index, callback)`**  \nRemove item at particular `index` (number) [(example)](http://codepen.io/pawelgrzybek/pen/BRBpQJ). Optional `callback` (function) available as a second argument [(example)](http://codepen.io/pawelgrzybek/pen/rmBjjE).\n\n**`insert(item, index, callback)`**  \nInsert new `item` (DOM element) at specific `index` (number) [(example)](http://codepen.io/pawelgrzybek/pen/QvLdaJ). Optional `callback` (function) available as a third argument [(example)](http://codepen.io/pawelgrzybek/pen/vmBgdZ).\n\n**`prepend(item, callback)`**  \nPrepend new `item` (DOM element) [(example)](http://codepen.io/pawelgrzybek/pen/rmBymW). Optional `callback` (function) available as a second argument [(example)](http://codepen.io/pawelgrzybek/pen/LyPWLe).\n\n**`append(item, callback)`**  \nAppend new `item` (DOM element) [(example)](http://codepen.io/pawelgrzybek/pen/RVbpZe). Optional `callback` (function) available as a second argument [(example)](http://codepen.io/pawelgrzybek/pen/rmByGj).\n\n**`destroy(restoreMarkup = false, callback)`**  \nRemove all event listeners on instance [(example)](http://codepen.io/pawelgrzybek/pen/oWvZEd). Use `restoreMarkup` to restore the initial markup inside selector [(example)](http://codepen.io/pawelgrzybek/pen/ZKzeoL). Optional `callback` (function) available as a third argument [(example)](http://codepen.io/pawelgrzybek/pen/Wjepyv).\n\n**`currentSlide`**  \nPrints current slide index [(example)](https://codepen.io/pawelgrzybek/pen/XRNOPP).\n\n## Browser support\n\n- IE10\n- Chrome 12\n- Firefox 16\n- Opera 15\n- Safari 5.1\n- Android Browser 4.0\n- iOS Safari 6.0\n\n## Extra \u0026 Thanks\n\nSiema means 'hello' in Polish. When I play around with some code, I always use random names. That's the whole story behind the name of this one :)\n\nHuge thanks to [Jarkko Sibenberg](http://www.sibenberg.com/) for the cute logo design! I can't thank [BrowserStack](https://www.browserstack.com) enough for giving me a free access to their testing amazing service.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpawelgrzybek%2Fsiema","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpawelgrzybek%2Fsiema","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpawelgrzybek%2Fsiema/lists"}