{"id":15413397,"url":"https://github.com/simonwep/presentr","last_synced_at":"2025-04-18T16:19:18.916Z","repository":{"id":33395287,"uuid":"145314717","full_name":"simonwep/presentr","owner":"simonwep","description":"Minimalistic javascript presentation-library. Zero dependencies. Can be used in combination with frameworks like Bootstrap, Materialize, Vue etc.","archived":false,"fork":false,"pushed_at":"2022-11-29T17:08:52.000Z","size":286,"stargazers_count":73,"open_issues_count":1,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-29T06:33:22.984Z","etag":null,"topics":["js-library","presentation","presentation-tools","slides","slideshow"],"latest_commit_sha":null,"homepage":"https://simonwep.github.io/presentr/","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/simonwep.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/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-08-19T15:25:43.000Z","updated_at":"2025-01-25T15:16:33.000Z","dependencies_parsed_at":"2022-09-16T00:50:22.025Z","dependency_job_id":null,"html_url":"https://github.com/simonwep/presentr","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonwep%2Fpresentr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonwep%2Fpresentr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonwep%2Fpresentr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonwep%2Fpresentr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simonwep","download_url":"https://codeload.github.com/simonwep/presentr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249191182,"owners_count":21227515,"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":["js-library","presentation","presentation-tools","slides","slideshow"],"created_at":"2024-10-01T16:56:54.963Z","updated_at":"2025-04-16T03:31:58.424Z","avatar_url":"https://github.com/simonwep.png","language":"JavaScript","readme":"\u003ch1 align=\"center\"\u003e\n    \u003cimg src=\"logo.png\" alt=\"Logo\"\u003e\n\u003c/h1\u003e\n\n\u003ch3 align=\"center\"\u003e\n    Minimalistic, Hackable, Fast Presentation Library.\n\u003c/h3\u003e\n\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"gzip size\" src=\"https://img.badgesize.io/https://raw.githubusercontent.com/Simonwep/presentr/master/dist/presentr.min.js?compression=gzip\u0026style=flat-square\"\u003e\n  \u003cimg alt=\"brotli size\" src=\"https://img.badgesize.io/https://raw.githubusercontent.com/Simonwep/presentr/master/dist/presentr.min.js?compression=brotli\u0026style=flat-square\"\u003e\n  \u003ca href=\"https://travis-ci.org/Simonwep/presentr\"\u003e\u003cimg\n     alt=\"Build Status\"\n     src=\"https://img.shields.io/travis/Simonwep/presentr.svg?style=popout-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@simonwep/presentr\"\u003e\u003cimg\n     alt=\"Download count\"\n     src=\"https://img.shields.io/npm/dm/@simonwep/presentr.svg?style=popout-square\"\u003e\u003c/a\u003e\n  \u003cimg alt=\"No dependencies\" src=\"https://img.shields.io/badge/dependencies-none-27ae60.svg?style=popout-square\"\u003e\n  \u003ca href=\"https://www.jsdelivr.com/package/npm/@simonwep/presentr\"\u003e\u003cimg\n     alt=\"JSDelivr download count\"\n     src=\"https://data.jsdelivr.com/v1/package/npm/@simonwep/presentr/badge\"\u003e\u003c/a\u003e\n  \u003cimg alt=\"Current version\"\n       src=\"https://img.shields.io/github/tag/Simonwep/presentr.svg?color=3498DB\u0026label=version\u0026style=flat-square\"\u003e\n  \u003ca href=\"https://www.patreon.com/simonwep\"\u003e\u003cimg\n     alt=\"Support me\"\n     src=\"https://img.shields.io/badge/patreon-support-3498DB.svg?style=popout-square\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n### Features\n* No jQuery\n* No dependencies\n* Hackable / Extensible\n* Ultra small\n* Native mobile-support\n\nWhy another library to provide the ability to create a presentation in your browser?\nIsn't there already Revealjs which is good and reliable?\nYeah, thought the same. But I was looking for a library which I can use in combination with React, Vue, Bootstrap, Materialize or whatever library I want.\nSomething which only provides the very essential functionalities to control slides and fragments.\n\n## Setup\n\n### Node\nInstall package:\n```shell\n$ npm install @simonwep/presentr --save\n```\n\nInclude code and style:\n```js\nimport presentr from '@simonwep/presentr';\n```\n---\n### Browser\n\njsdelivr:\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@simonwep/presentr/dist/presentr.min.js\"\u003e\u003c/script\u003e\n```\n\nDirectly:\n```html\n\u003cscript src=\"node_modules/@simonwep/presentr/dist/presentr.min.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n```javascript\n// Simple example, see optional options for more configuration.\nconst presentr = new Presentr({\n    slides: '.slide',\n    fragments: '.frag'\n});\n```\n\n## Optional options\n```javascript\nconst presentr = new Presentr({\n\n     // Query selector to your slides.\n    slides: '.slide',\n\n    // Query selector for each fragment of the presentaion.\n    fragments: '.frag',\n\n    /**\n     *  Can be used to group fragments.\n     *  Apply to multiple elements 'g-a' and they will \n     *  all get active until the first element wich this group \n     *  has been reached.\n     */\n    fragmentGroupPrefix: 'g-',\n\n    // Start index. Does not change the slide sequence.\n    slideIndex: 0,\n\n    // CSS Classes to get control the appereance of slides and fragments.\n    // It's possible to use arrays\n    classes: {\n        previousSlide: 'previous-slide', // Class for slides behind the current one\n        nextSlide: 'next-slide',         // Class for slides after the current one\n        currentSlide: 'current-slide',   // Class which will be added only to the current slide.\n\n        // Same functionality, just for fragments.\n        activeFragment: 'active-frag',\n        currentFragment: 'current-frag'\n    },\n\n    // Keyboard shortcuts.\n    shortcuts: {\n\n        // Jump to next / previous slide\n        nextSlide: ['d', 'D'],\n        previousSlide: ['a', 'A'],\n\n        // Jump to first / last slide\n        firstSlide: ['y', 'Y'],\n        lastSlide: ['x', 'X'],\n\n        // Jumpt to next / previous fragement. If the first or last fragment is reached,\n        // the next action would jump to the next / previous slide.\n        nextFragment: ['ArrowRight', 'ArrowDown'],\n        previousFragment: ['ArrowLeft', 'ArrowUp']\n    }\n});\n```\n\n## Events\nSince version `1.1.x` Presentr is event-driven. Use the `on(event, cb)` and `off(event, cb)` functions to bind / unbind eventlistener.\n\n| Event      | Description | Arguments |\n| -------------- | ----------- | ----------- | \n| `action`       | Fires both on `slide` and `fragment` | `{presentr: PickrInstance}` |\n| `beforeSlide`  | Before slide changes | `{presentr: PickrInstance, from: slideIndex, to: slideIndex}` |\n| `slide`        | Slide changed | `{presentr: PickrInstance}` |\n| `beforeFragment` | Before fragment changes | `{presentr: PickrInstance, from: fragmentIndex, to: fragmentIndex}` |\n| `fragment`     | Fragment changed | `PickrInstance` |\n\n\u003e Example:\n```js\npresentr.on('action', () =\u003e {\n    console.log('action');\n}).on('beforeSlide', obj =\u003e {\n    console.log('beforeSlide', obj);\n    // Return false explicitly to block slide\n}).on('beforeFragment', obj =\u003e {\n    console.log('beforeFragment', obj);\n    // Return false explicitly to block fragment\n}).on('slide', () =\u003e {\n    console.log('slide');\n}).on('fragment', () =\u003e {\n    console.log('fragment');\n});\n```\n\n## Methods\n* presentr.nextSlide() _- Jump to next slide._\n* presentr.previousSlide() _- Jump to previous slide._\n* presentr.firstSlide() _- Jump to first slide._\n* presentr.lastSlide() _- Jump to last slide._\n* presentr.jumpSlide(index`:Number`) _- Jump to a specific slide._\n* presentr.nextFragment() _- Jump to next fragment, if end reached the next slide will be shown._\n* presentr.previousFragment() _- Jump to previous fragment, if start reached the previous slide will be shown._\n* presentr.jumpFragment(index`:Number`) _- Jump to a specific fragment on the current slide._\n* presentr.destroy() _- Destroys the presentr instance and unbinds all event-listeners._\n\n## Getters\n* presentr.totalSlides _- Total amount of slides._\n* presentr.totalFragments _- Total amount of fragments in current slide._\n* presentr.slideIndex _- Current slide index._\n* presentr.fragmentIndex _- Current fragment index in slide._\n* presentr.globalFragmentCount _- Total amount of fragments on all slides combined._\n\n## Contributing\nIf you want to open a issue, create a Pull Request or simply want to know how you can run it on your local machine, please read the [Contributing guide](https://github.com/Simonwep/presentr/blob/master/.github/CONTRIBUTING.md).\n","funding_links":["https://www.patreon.com/simonwep"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonwep%2Fpresentr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimonwep%2Fpresentr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonwep%2Fpresentr/lists"}