MMM-SimpleBackgroundSlideshow

A lightweight and customizable background slideshow module for MagicMirror² that displays rotating images with smooth transitions. Built using the Vegas jQuery plugin for professional slideshow effects.

Features

• 🖼️ Customizable background slideshow with smooth transitions
• ⏱️ Configurable timing and delay settings
• 🎨 Multiple transition effects (fade, slideLeft, slideRight, etc.)
• 🎯 Animation options with random or specific effects
• 🎲 Shuffle and randomization support
• 🎨 Background color and alignment customization
• 🔄 Dynamic slideshow updates via notifications

Installation

1. Navigate to your MagicMirror's modules directory:

   cd ~/MagicMirror/modules

2. Clone this repository:

   git clone https://github.com/muhammedsaidckr/MMM-SimpleBackgroundSlideshow.git

3. Install dependencies:

   cd MMM-SimpleBackgroundSlideshow
   npm install

4. Add the module to your config/config.js file (see Usage section).

Usage

Add the module to your MagicMirror config:

modules: [
    {
        module: "MMM-SimpleBackgroundSlideshow",
        position: "fullscreen_below", // Recommended for background slideshows
        config: {
            urls: [
                "https://example.com/image1.jpg",
                "https://example.com/image2.jpg",
                "path/to/local/image3.jpg"
            ],
            delay: 10000,
            transition: "fade",
            shuffle: true
        }
    }
]

Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | urls | Array | [] | Required. List of image URLs to display in the slideshow | | delay | Number | 7000 | Time between slide transitions (milliseconds) | | timer | Boolean | false | Show/hide timer indicator | | shuffle | Boolean | true | Randomize slide order | | firstTransition | String | "fade" | Transition effect for the first slide | | firstTransitionDuration | Number | 10000 | Duration of first transition (milliseconds) | | transition | String | "random" | Transition effect between slides ("fade", "slideLeft", "slideRight", "slideUp", "slideDown", "random") | | animation | String | "random" | Animation effect during transitions | | transitionDuration | Number | 10000 | Duration of transitions (milliseconds) | | cover | Boolean | true | Scale images to cover entire container | | color | String | "black" | Background color when images don't fill container | | align | String | "top" | Horizontal alignment ("left", "center", "right", "top", "bottom") | | valign | String | "center" | Vertical alignment ("left", "center", "right", "top", "bottom") |

Dynamic Updates

The module supports dynamic slideshow updates via MagicMirror² notifications:

// Send notification to update slideshow
this.sendNotification("CHANGE_SLIDE_LIST", {
    urls: ["new-image1.jpg", "new-image2.jpg"],
    delay: 5000,
    transition: "slideLeft"
});

Positioning

For best results, use position: "fullscreen_below" to display the slideshow as a full-screen background behind other modules.

Other suitable positions for background content:

• fullscreen_above
• fullscreen_below (recommended)

Overlay Images

The module includes sample overlay images in the overlays/ directory (01.png through 09.png) that can be used for additional visual effects.

Contributing

Contributions are welcome! Please feel free to submit issues and pull requests.

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Muhammed Said Cakir

• GitHub: @muhammedsaidckr
• npm: @muhammedsaidckr/mmm-simplebackgroundslideshow