# Getting Started with SenangWebs Deck Welcome to SenangWebs Deck (SWD)! This guide will help you create your first presentation. ## Table of Contents - [Installation](#installation) - [Creating Your First Presentation](#creating-your-first-presentation) - [Input Formats](#input-formats) - [Configuration Options](#configuration-options) - [Navigation](#navigation) - [Next Steps](#next-steps) ## Installation ### Option 1: NPM (Recommended) ```bash npm install senangwebs-deck ``` Then import in your project: ```javascript import SWD from 'senangwebs-deck'; import 'senangwebs-deck/dist/swd.css'; ``` ### Option 2: CDN Include the CSS and JS files directly in your HTML: ```html ``` ### Option 3: Download Download the latest release from [GitHub releases](https://github.com/senangwebs/deck/releases) and include the files: ```html ``` ## Creating Your First Presentation ### Basic HTML Structure ```html My First Presentation
``` ## Input Formats SWD supports three input formats. Choose the one that fits your workflow best! ### 1. HTML Attributes (Simple and Direct) Perfect for when you want full control over your HTML structure. ```html

My Presentation

Subtitle goes here

First Topic

Left Side

Content on the left

Right Side

Content on the right

``` ### 2. Markdown (Quick and Easy) Perfect for rapid prototyping and text-heavy presentations. Create a `slides.md` file: ```markdown # My Presentation ## Welcome to SWD --- ## First Topic - Point one - Point two - Point three --- ## Left Side Content on the left ## Right Side Content on the right --- ## Thank You! ``` Load it in your HTML: ```html
``` **Markdown Syntax:** - `---` separates slides - `` defines the slide layout - `` sets the background - `` splits content in two-column and three-column layouts - Standard markdown syntax for formatting (headings, lists, bold, italic, code, etc.) For complete markdown format documentation, see the [Markdown Format Guide](markdown-format.md). ### 3. JSON (Data-Driven) Perfect for programmatic generation and CMS integration. ```javascript const slides = { slides: [ { layout: 'cover', title: 'My Presentation', subtitle: 'Welcome to SWD', background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }, { layout: 'default', title: 'First Topic', content: '' }, { layout: 'two-cols', left: '

Left Side

Content on the left

', right: '

Right Side

Content on the right

' } ] }; const deck = new SWD('#presentation', { source: 'json', data: slides, theme: 'gradient' }); ``` Or load from an external file: ```javascript const deck = new SWD('#presentation', { source: 'json', jsonUrl: './slides.json', theme: 'gradient' }); ``` ## Configuration Options Here are the most common configuration options: ```javascript const deck = new SWD('#presentation', { // Source type: 'html', 'markdown', or 'json' source: 'html', // External file URLs markdownUrl: './slides.md', // For markdown jsonUrl: './slides.json', // For JSON // Theme: 'light', 'dark', 'gradient', 'minimal', 'corporate', 'creative', 'academic' theme: 'light', // Transition: 'slide', 'fade', 'zoom', 'flip', 'none' transition: 'slide', // Transition speed: 'fast' (300ms), 'normal' (500ms), 'slow' (800ms), or number in ms transitionSpeed: 'normal', // Slide aspect ratio: '16:9', '4:3', '16:10' aspectRatio: '16:9', // Show navigation controls controls: true, // Controls position: 'bottom-right', 'bottom-left', 'edges' controlsPosition: 'bottom-right', // Show progress bar progress: true, // Progress bar position: 'bottom', 'top' progressPosition: 'bottom', // Show slide numbers slideNumbers: true, // Slide number format: 'h/v', 'h.v', 'c/t', 'c' slideNumberFormat: 'h/v', // Enable keyboard navigation keyboard: true, // Enable touch/swipe gestures touch: true, // Enable mouse wheel scroll navigation mouseWheel: false, // Auto-slide interval in ms (0 = disabled) autoSlide: 0, // Pause auto-sliding on hover autoSlideStoppable: true, // Loop through slides loop: false, // Enable URL hash navigation (e.g. #/slide-1) hash: true, // RTL layout mode rtl: false, // Auto-initialize (set to false for manual init) autoInit: true }); ``` ## Navigation ### Keyboard Shortcuts - **Arrow Right / Space** - Next slide - **Arrow Left** - Previous slide - **Home** - First slide - **End** - Last slide - **F** - Toggle fullscreen - **O** - Toggle overview mode - **P** - Pause/resume auto-slide - **Esc** - Exit fullscreen or overview ### Touch Gestures - **Swipe Left** - Next slide - **Swipe Right** - Previous slide - **Pinch** - Toggle overview mode ### Programmatic Navigation ```javascript // Navigate to specific slide deck.goTo(3); // Next slide deck.next(); // Previous slide deck.prev(); // Go to first slide deck.goToFirst(); // Go to last slide deck.goToLast(); // Get current slide index const currentIndex = deck.getCurrentSlide(); // Get total number of slides const totalSlides = deck.getTotalSlides(); ``` ## Available Layouts ### Cover Full-screen title slide with centered content. ```html

Main Title

Subtitle

``` ### Default Single column with standard content flow. ```html

Title

Content goes here

``` ### Center Centered content, perfect for important messages. ```html

Centered Message

Important information

``` ### Two Columns Split content into left and right sections. ```html
Left content
Right content
``` ### Three Columns Three equal-width columns. ```html
Column 1
Column 2
Column 3
``` ### Quote Large, prominent quote display. ```html
The only way to do great work is to love what you do.
Steve Jobs
``` ### Section Section divider slide. ```html

Section Title

``` ### Image Layouts `image-right`, `image-left`, and `full-image` for image-heavy slides. ```html

Content

Text appears on the left, image on the right

``` ## Backgrounds Add backgrounds to any slide: ```html
``` ## Next Steps Now that you've created your first presentation, explore more advanced features: - [API Documentation](api.md) - Detailed API reference - [Examples](../examples/) - Sample presentations ## Tips and Best Practices 1. **Keep it Simple** - Less is more. Don't overload slides with content. 2. **Use Layouts** - Leverage built-in layouts for consistency. 3. **Choose the Right Format** - HTML for control, Markdown for speed, JSON for data. 4. **Test Navigation** - Always test keyboard, mouse, and touch navigation. 5. **Responsive Design** - Test on different screen sizes. 6. **Accessibility** - Use semantic HTML and provide alt text for images. ## Troubleshooting ### Slides not appearing - Check that the container element exists - Verify the source type matches your content - Check browser console for errors ### Transitions not working - Ensure transitions are enabled in config - Check that transition name is valid - Verify CSS is loaded correctly ### Keyboard navigation not working - Make sure `keyboard: true` in config - Check that no other scripts are capturing keyboard events - Verify the presentation container has focus ## Getting Help - **Documentation**: Check our full [API documentation](api.md) - **Examples**: Browse the [examples folder](../examples/)