An easy-to-use HTML Framework that lets you create beautiful and interactive presentation using HTML Elements.
View demo
🌈📝🚀
Just download the zip file, customize index.html and open it in a browser
arish-shah.github.io/make-slides/ms.zip
To gain full control over the library, its styles and functions, you'll need to run the presentation from a local web server
-
Install Node.js
-
Clone the repository
$ git clone https://github.com/arish/make-slides.git
-
Navigate to the folder
$ cd make-slides -
Install dependencies
$ npm install
-
Start the development server
$ npm start
- public/ index.html file containing the presentation
- src/css/ Core library styles
- src/js/ Core library scripts
Each parent <section> in .make-slides is an individual slide
<html>
<head>
<script src="./js/make-slides.js"></script>
</head>
<body>
<div class="make-slides">
<section>First Slide</section>
<section>Second Slide</section>
</div>
<script>
makeSlides.init();
</script>
</body>
</html>In order to change the default behaviour, configuration values can be provided. They are optional, and if not provided will default to the following values.
makeSlides.init({
// Background color of the presentation
bgColor: '#121d23',
//Change the animation duration for slide transition
animationDuration: 100,
//To remove the slide transition animation
transition: null
//Show/Hide the bottom progress bar
progressBar: true
//Show/Hide the slide controls
controls: true
});A custom theme can be used by importing them in your main.scss file in src/css folder. Make sure to get rid of the default style import.
@import './themes/yellow.scss';To change the background of individual slides, use the attribute data-bg
<div class="make-slides">
<section data-bg="#fd0">
<!-- Slide with yellow background -->
</section>
<section data-bg="linear-gradient(to right, #fd0, #ff0)">
<!-- Slide with gradient background -->
</section>
<section data-bg="url(./assets/image.jpg)">
<!-- Slide with a custom image as background -->
</section>
</div>This project is open source and available under the MIT License.