slides
Forget PowerPoint. Make HTML slides in a fly.
View DemoFeatures -
- Simple, Easy to Use
- Written in Vanilla Javascript
- Simple Markup
- FullScreen View
- 5+ Prebuilt Themes
- Customize Themes
Available Themes -
Use cases
Presentation for a programming language.
Or Quick Slideshow during Meetups.
Well, you can use it anywhere you like without much of a headache.
How to Use ?
Just give a `div` (not necessarily a `div`, it can be a `span` or some other container) an id of `slides`.
Inside that there must be various other containers with a class of `slide`, which are the actual slides.
These Actual Slides with a class of `slide` can contain different HTML5 tags.
<div id="slides">
<div class="slide">
<h1>Heading 1</h1>
<p>Description 1</p>
</div>
<div class="slide">
<h1>Heading 2</h1>
<p>Description 2</p>
</div>
.
.
.
.
.
<div class="slide">
<h1>Heading N..</h1>
<p>Description N..</p>
</div>
</div>
Using a Theme
Download themes from here & then simply hot-link the url of the `theme.css` file.
<!-- include this in `index.html` file to make the slides work. this is the minimal requirement -->
<!-- theme which you can customize for personal use or use the existing ones -->
<link rel="stylesheet" href="/path/to/theme.css">
<!-- original stylesheet consisting of the basic styles applied -->
<link rel="stylesheet" href="/path/to/style.css">
<!-- include javascript file to make the slides work -->
<script src="/path/to/app.js"></script>
Creating a Theme
Simple copy the below snippet & include it above the main CSS file. All the variables are self-explanatory. Just change the values & viola new theme is created. Ain't that simple ?
/* My favourite red theme */
:root {
--bg-color: #BA2030;
--default-font: 'Inconsolata', Helvetica;
--default-color: #acd;
--header-footer-font: 'Quattrocento', Courier, monospace;
--header-footer-color: #acd;
--h1-color: yellowgreen;
--para-color: #112242;
--code-color: #00ff00;
--code-bg-color: black;
--code-border-color: #111111;
--anchor-color: orange;
--list-item-color: #11dd88;
--fullscreen-color: #BA2030;
}
Thanks
This is a stupid side project, just made for fun !! Anywayz thanks !!