https://github.com/axel-dev/riot-presents

Riot slideshow components
https://github.com/axel-dev/riot-presents

presentation riotjs slide slideshow

Last synced: about 1 month ago
JSON representation

Riot slideshow components

• Host: GitHub
• URL: https://github.com/axel-dev/riot-presents
• Owner: AXeL-dev
• License: mit
• Created: 2019-03-30T12:50:16.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2020-12-12T12:18:53.000Z (over 5 years ago)
• Last Synced: 2025-10-08T00:50:56.567Z (6 months ago)
• Topics: presentation, riotjs, slide, slideshow
• Language: HTML
• Homepage: https://axel-dev.github.io/riot-presents/
• Size: 654 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
Riot Presents

=============

A [Riot](https://axel-dev.github.io/portfolio/blog/post/riot-js-simple-yet-powerful) slideshow components to create HTML presentations inspired by [react-presents](https://github.com/bvaughn/react-presents) & [Slidr](https://github.com/sarfraznawaz2005/Slidr).

[View Demo](https://axel-dev.github.io/riot-presents/)

Example Usage

-------------

To setup your own slides you only need to modify the [slides.js](js/slides.js) file & fill up the `slides` array with your data like so:

```javascript

var slides = [];

slides.push({

    title:   'Slide Title',

    content: 'Some text or HTML content or expressions { expressions.text }',

    class:   'white-color', // Any CSS class(es) that should be applied to the slide container

    style:   `

        :scope {

            background-color: dark;

        }

        .white-color {

            color: white;

        }

    `, // custom CSS will work only on the elements inside the slide

    expressions: {

        text: 'This is inserted with an expression'

    } // expressions is a simple object used to fill Riot JS expressions

});

```

That's it!

**Note**: you can merge all the tag files into one file/component to simplify the inclusion of riot-presents into your projects.

Contributing

------------

Read [contributing guidelines](https://github.com/AXeL-dev/contributing/blob/master/README.md).

License

-------

riot-presents is licensed under the [MIT](LICENSE) license.