Basic Slides
This is a simple setup of presentation slides, which is targeted at people who know HTML and CSS.
Get Started
- Create a HTML file to contain your slideshow
- Open the HTML file in a decent browser
- Edit the HTML and CSS as needed
npm
npm i @bleptek/basic-slidesyarn
yarn add @bleptek/basic-slidesunpkg
https://unpkg.com/@bleptek/basic-slides/dist/css/theme-light.css
https://unpkg.com/@bleptek/basic-slides/dist/css/theme-dark.css
https://unpkg.com/@bleptek/basic-slides/dist/main.jsBoilerplate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/@bleptek/basic-slides/dist/css/theme-dark.css">
</head>
<body>
<div class="o-slider">
<div class="c-slide">
<h1>Slide 1</h1>
</div>
<div class="c-slide">
<h1>Slide 2</h1>
</div>
</div>
</body>
<script src="https://unpkg.com/@bleptek/basic-slides/dist/main.js"></script>
<script>
var slide = document.querySelector(".o-slider");
slide.blepslide();
</script>
</html>Classes
We support a few CSS classes for custom styling.
-
__middle: This will set the content in the middle of the slide. -
__center: This will set the text in the middle of the slide.
Development
If you want to contribute, then fork the repository and run the commands below.
# Install dependencies
npm install
# Build project
npm run build
# Watch source files
npm run watchBrowser Support
This is supported in all modern browsers, and no - not Internet Explorer