{"id":13830472,"url":"https://github.com/darickc/MMM-BackgroundSlideshow","last_synced_at":"2025-07-09T11:33:18.320Z","repository":{"id":33266860,"uuid":"143166393","full_name":"darickc/MMM-BackgroundSlideshow","owner":"darickc","description":null,"archived":false,"fork":false,"pushed_at":"2024-09-14T15:07:42.000Z","size":8692,"stargazers_count":144,"open_issues_count":61,"forks_count":80,"subscribers_count":18,"default_branch":"master","last_synced_at":"2024-09-15T01:04:07.210Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/darickc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-08-01T14:21:40.000Z","updated_at":"2024-09-14T15:07:47.000Z","dependencies_parsed_at":"2023-11-29T06:22:29.156Z","dependency_job_id":"2a99d1f5-d870-41cf-a573-2057c4b82ade","html_url":"https://github.com/darickc/MMM-BackgroundSlideshow","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darickc%2FMMM-BackgroundSlideshow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darickc%2FMMM-BackgroundSlideshow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darickc%2FMMM-BackgroundSlideshow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darickc%2FMMM-BackgroundSlideshow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/darickc","download_url":"https://codeload.github.com/darickc/MMM-BackgroundSlideshow/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225539412,"owners_count":17485322,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T10:01:00.606Z","updated_at":"2025-07-09T11:33:18.314Z","avatar_url":"https://github.com/darickc.png","language":"JavaScript","funding_links":[],"categories":["Photos"],"sub_categories":[],"readme":"# Module: Background Slideshow\n\nShow a slideshow of images in the background of [MagicMirror²](https://magicmirror.builders/). Great for a photo frame from instead of a mirror.\n\nThe `MMM-BackgroundSlideshow` module is designed to display images fullscreen, one at a time on a fixed interval, from one or many directories. These images can be shown in order or at random, one directory at a time or all at time. The images can transition from one to the other and be shown with no edge (cover) or the enter image(contain).\n\nBased on [MMM-ImageSlideshow](https://github.com/AdamMoses-GitHub/MMM-ImageSlideshow/).\n\n\u003cimg src=\"https://github.com/darickc/MMM-BackgroundSlideshow/blob/master/screenshots/landscape.jpg\" style=\"width: 300px;\" /\u003e\n\u003cimg src=\"https://github.com/darickc/MMM-BackgroundSlideshow/blob/master/screenshots/portait.jpg\" style=\"width: 300px;\" /\u003e\n\n## Dependencies / Requirements\n\nThis module requires no special dependencies. The only requirement is that the image directories you path to are fixed paths accessible to the MagicMirror instance.\n\n## Operation\n\nThis module will take in a list of directory paths, one or more, containing image files. The module will display those images in either alphabetical or random order, across either each path one at time or across all the paths at once. Once all the images have been shown, it will loop back and start again.\n\nExtra configurations include setting the amount of time an image is shown for, selecting which file extensions are valid, the transition speed from one image to another, the background sizing, whether or not to animate the transition from one to the other, the gradient used to make the text more readable, and the gradient opacity.\n\n## Using the module\n\nUse Git to download. Make sure Git is installed on your system. In the command line/terminal, go to the modules directory of the your MagicMirror install. run: `git clone https://github.com/darickc/MMM-BackgroundSlideshow`. The advantage of using Git is when there is an update, you can run `git pull` and it will pull down all the updates. MagicMirror can even let you know when there are updates.\n\nOr\n\nDownload the zip file \u003chttps://github.com/darickc/MMM-BackgroundSlideshow/archive/master.zip\u003e. Unzip contents into the modules directory of your MagicMirror install. Rename the 'MMM-BackgroundSlideshow-master' folder to 'MMM-BackgroundSlideshow'.\n\nOnce downloaded, install dependencies:\n\n```sh\ncd ~/MagicMirror/modules/MMM-BackgroundSlideshow\n```\n\n```sh\nnpm install\n```\n\nAdd the module to the modules array in the `config/config.js` file:\n\n```javascript\nmodules: [\n  {\n    module: 'MMM-BackgroundSlideshow',\n    position: 'fullscreen_below',\n    config: {\n      imagePaths: ['modules/MMM-BackgroundSlideshow/exampleImages/'],\n      transitionImages: true,\n      randomizeImageOrder: true\n    }\n  }\n];\n```\n\nI also recommend adding the following to the custom.css to make the text a little brighter:\n\n```css\n.normal,\n.dimmed,\nheader,\nbody {\n  color: #fff;\n}\n```\n\n## Notification options\n\nThe following notifications can be used:\n\n\u003ctable width=\"100%\"\u003e\n\t\u003c!-- why, markdown... --\u003e\n\t\u003cthead\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003cth\u003eNotification\u003c/th\u003e\n\t\t\t\u003cth width=\"100%\"\u003eDescription\u003c/th\u003e\n\t\t\u003c/tr\u003e\n\t\u003cthead\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003eBACKGROUNDSLIDESHOW_UPDATE_IMAGE_LIST\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eReload images list and start slideshow from first image. Works best when sorted by modified date descending.\u003cbr\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003eBACKGROUNDSLIDESHOW_NEXT\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eChange to the next image, restart the timer for image changes only if already running\u003cbr\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003eBACKGROUNDSLIDESHOW_PREVIOUS\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eChange to the previous image, restart the timer for image changes only if already running\u003cbr\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003eBACKGROUNDSLIDESHOW_PAUSE\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003ePause the timer for image changes\u003cbr\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003eBACKGROUNDSLIDESHOW_PLAY\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eChange to the next image and start the timer for image changes\u003cbr\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003eBACKGROUNDSLIDESHOW_URL\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eShow an image by passing an object with a URL. Include resume=true to continue slideshow after displaying image, otherwise the image will display until another notification such as BACKGROUNDSLIDESHOW_PLAY.\n\t\t\t \u003cbr\u003eExample payload: {url:'url_to_image', resume: true}\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003eBACKGROUNDSLIDESHOW_URLS\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003ePass in a list of URLs to display in the background.  To continue showing photos, pass in an empty array or no payload.\n\t\t\t \u003cbr\u003eExample payload: {urls:['url_to_image', 'url_to_image']}\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\u003c/table\u003e\n\n## Configuration options\n\nThe following properties can be configured:\n\n\u003ctable width=\"100%\"\u003e\n\t\u003c!-- why, markdown... --\u003e\n\t\u003cthead\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003cth\u003eOption\u003c/th\u003e\n\t\t\t\u003cth width=\"100%\"\u003eDescription\u003c/th\u003e\n\t\t\u003c/tr\u003e\n\t\u003cthead\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003eimagePaths\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eArray value containing strings. Each string should be a path to a directory where image files can be found.  Can be relative or absolute\u003cbr\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003e['modules/MMM-BackgroundSlideshow/exampleImages/']\u003c/code\u003e\n        \u003cbr\u003e\u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003e['/images/']\u003c/code\u003e\n\t\t\t\t\u003cbr\u003eThis value is \u003cb\u003eREQUIRED\u003c/b\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003eexcludePaths\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eArray value containing strings. When scanning subdirectories for\n\t\t\timages, directories with these names will be ignored.\u003cbr\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003e['@eaDir']\u003c/code\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eDefault value:\u003c/b\u003e \u003ccode\u003e['@eaDir']\u003c/code\u003e\n\t\t\t\t\u003cbr\u003eThis value is \u003cb\u003eOPTIONAL\u003c/b\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003eslideshowSpeed\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eInteger value, the length of time to show one image before switching to the next, in milliseconds.\u003cbr\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003e6000\u003c/code\u003e for 6 seconds\n\t\t\t\t\u003cbr\u003e\u003cb\u003eDefault value:\u003c/b\u003e \u003ccode\u003e10000\u003c/code\u003e or 10 seconds\n\t\t\t\t\u003cbr\u003eThis value is \u003cb\u003eOPTIONAL\u003c/b\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n    \u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003eresizeImages\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eBoolean value, if images should be resized or not.  For better performance, this should be true and the height and width set to the resolution of the monitor being used\u003cbr\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003etrue\u003c/code\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eDefault value:\u003c/b\u003e \u003ccode\u003efalse\u003c/code\u003e\n\t\t\t\t\u003cbr\u003eThis value is \u003cb\u003eOPTIONAL\u003c/b\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n    \u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003emaxWidth\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eInteger value, the width the image should be resized to.\u003cbr\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003e3840\u003c/code\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eDefault value:\u003c/b\u003e \u003ccode\u003e1920\u003c/code\u003e\n\t\t\t\t\u003cbr\u003eThis value is \u003cb\u003eOPTIONAL\u003c/b\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n    \u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003emaxHeight\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eInteger value, the height the image should be resized to.\u003cbr\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003e2160\u003c/code\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eDefault value:\u003c/b\u003e \u003ccode\u003e1080\u003c/code\u003e\n\t\t\t\t\u003cbr\u003eThis value is \u003cb\u003eOPTIONAL\u003c/b\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003erandomizeImageOrder\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eBoolean value, if true will randomize the order of the images, otherwise use sortImagesBy and sortImagesDescending sorting by filename.\u003cbr\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003etrue\u003c/code\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eDefault value:\u003c/b\u003e \u003ccode\u003efalse\u003c/code\u003e\n\t\t\t\t\u003cbr\u003eThis value is \u003cb\u003eOPTIONAL\u003c/b\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n    \u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003erandomizeImagesLoopFolders\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eBoolean value, if true will randomize the order of all images and then create a filelist so that the images will ordered to show one image from each subfolder before next image index is shown. Subfolders with fewer images will loop so that all subfolders will get equal amount of time in the spotlight\u003cbr\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003etrue\u003c/code\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eDefault value:\u003c/b\u003e \u003ccode\u003efalse\u003c/code\u003e\n\t\t\t\t\u003cbr\u003eThis value is \u003cb\u003eOPTIONAL\u003c/b\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n    \u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003eshowAllImagesBeforeRestart\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eBoolean value, if true will keep track of all the allready shown files and not show them untill all images has been shown\u003cbr\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003etrue\u003c/code\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eDefault value:\u003c/b\u003e \u003ccode\u003efalse\u003c/code\u003e\n\t\t\t\t\u003cbr\u003eThis value is \u003cb\u003eOPTIONAL\u003c/b\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003esortImagesBy\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eString value, determines how images are sorted.  Possible values are: name (by file name), created (by file created date), modified (by file\n\t\t\tmodified date). Only used if randomizeImageOrder is set to false.\u003cbr\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003ecreated\u003c/code\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eDefault value:\u003c/b\u003e \u003ccode\u003ename\u003c/code\u003e\n\t\t\t\t\u003cbr\u003eThis value is \u003cb\u003eOPTIONAL\u003c/b\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003esortImagesDescending\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eBoolean value, if true will sort images in descending order, otherwise in ascending order. Only used if randomizeImageOrder is set to false.\u003cbr\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003etrue\u003c/code\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eDefault value:\u003c/b\u003e \u003ccode\u003efalse\u003c/code\u003e\n\t\t\t\t\u003cbr\u003eThis value is \u003cb\u003eOPTIONAL\u003c/b\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n        \u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003erecursiveSubDirectories\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eBoolean value, if true it will scan all sub-directories in the imagePaths.\u003cbr\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003etrue\u003c/code\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eDefault value:\u003c/b\u003e \u003ccode\u003efalse\u003c/code\u003e\n\t\t\t\t\u003cbr\u003eThis value is \u003cb\u003eOPTIONAL\u003c/b\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n        \u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003evalidImageFileExtensions\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eString value, a list of image file extensions, separated by commas, that should be included. Files found without one of the extensions will be ignored.\u003cbr\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003e'png,jpg'\u003c/code\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eDefault value:\u003c/b\u003e \u003ccode\u003e'bmp,jpg,jpeg,gif,png'\u003c/code\u003e\n\t\t\t\t\u003cbr\u003eThis value is \u003cb\u003eOPTIONAL\u003c/b\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003eshowImageInfo\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eBoolean value, if true a div containing the currently displayed image information will be shown.\u003cbr\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003etrue\u003c/code\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eDefault value:\u003c/b\u003e \u003ccode\u003efalse\u003c/code\u003e\n\t\t\t\t\u003cbr\u003eThis value is \u003cb\u003eOPTIONAL\u003c/b\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003eimageInfoLocation\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eString value, determines which corner of the screen the image info div should be displayed in.  Possible values are: bottomRight, bottomLeft, topLeft, topRight\u003cbr\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003etopLeft\u003c/code\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eDefault value:\u003c/b\u003e \u003ccode\u003ebottomRight\u003c/code\u003e\n\t\t\t\t\u003cbr\u003eThis value is \u003cb\u003eOPTIONAL\u003c/b\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003eimageInfo\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eString value, a list of image properties to display in the image info div, separated by commas.  Possible values are : date (EXIF date from image), name (image name).\n\t\t\tFor the iamge name, the relative path from that defined in imagePaths is displayed if the recursiveSubDirectories option is set to true.\u003cbr\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003edate,name\u003c/code\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eDefault value:\u003c/b\u003e \u003ccode\u003ename\u003c/code\u003e\n\t\t\t\t\u003cbr\u003eThis value is \u003cb\u003eOPTIONAL\u003c/b\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003eimageInfoNoFileExt\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eBoolean value, if true the file extension will be removed before the image name is displayed.\n\t\t\t\u003cbr\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003etrue\u003c/code\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eDefault value:\u003c/b\u003e \u003ccode\u003efalse\u003c/code\u003e\n\t\t\t\t\u003cbr\u003eThis value is \u003cb\u003eOPTIONAL\u003c/b\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e    \t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003etransitionSpeed\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eTransition speed from one image to the other, transitionImages must be true. Must be a valid css transition duration.\u003cbr\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003e'2s'\u003c/code\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eDefault value:\u003c/b\u003e \u003ccode\u003e'1s'\u003c/code\u003e\n\t\t\t\t\u003cbr\u003eThis value is \u003cb\u003eOPTIONAL\u003c/b\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003eshowProgressBar\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eBoolean value, if true a progress bar indicating how long till the next image is\n\t\t\tdisplayed is shown.\u003cbr\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003etrue\u003c/code\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eDefault value:\u003c/b\u003e \u003ccode\u003efalse\u003c/code\u003e\n\t\t\t\t\u003cbr\u003eThis value is \u003cb\u003eOPTIONAL\u003c/b\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n    \t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003ebackgroundSize\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eThe sizing of the background image. Values can be:\u003cbr\u003e\n        cover: Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.\u003cbr\u003e\n        contain: Resize the background image to make sure the image is fully visible\u003cbr\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003e'contain'\u003c/code\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eDefault value:\u003c/b\u003e \u003ccode\u003e'cover'\u003c/code\u003e\n\t\t\t\t\u003cbr\u003eThis value is \u003cb\u003eOPTIONAL\u003c/b\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n    \t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003ebackgroundPosition\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eDetermines where the background image is placed if it doesn't fill the whole screen (i.e. backgroundSize is 'contain'). Module already defaults to 'center', so the most useful options would be: 'top' 'bottom' 'left' or 'right'. However, any valid value for CSS background-position could be used.\u003cbr\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003e'top'\u003c/code\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eDefault value:\u003c/b\u003e \u003ccode\u003e'center'\u003c/code\u003e\n\t\t\t\t\u003cbr\u003eThis value is \u003cb\u003eOPTIONAL\u003c/b\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n    \t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003etransitionImages\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eTransition from one image to the other (may be a bit choppy on slower devices, or if the images are too big).\u003cbr\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003etrue\u003c/code\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eDefault value:\u003c/b\u003e \u003ccode\u003efalse\u003c/code\u003e\n\t\t\t\t\u003cbr\u003eThis value is \u003cb\u003eOPTIONAL\u003c/b\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n    \t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003egradient\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eThe vertical gradient to make the text more visible.  Enter gradient stops as an array.\u003cbr\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003e[\n\t\t\t\t\"rgba(0, 0, 0, 0.75) 0%\",\n\t\t\t\t\"rgba(0, 0, 0, 0) 40%\"\n\t\t\t\t]\u003c/code\u003e\n\t\t\t\t\t\t\t\u003cbr\u003e\u003cb\u003eDefault value:\u003c/b\u003e \u003ccode\u003e[\n\t\t\t\t\"rgba(0, 0, 0, 0.75) 0%\",\n\t\t\t\t\"rgba(0, 0, 0, 0) 40%\",\n\t\t\t\t\"rgba(0, 0, 0, 0) 80%\",\n\t\t\t\t\"rgba(0, 0, 0, 0.75) 100%\"\n\t\t\t\t]\u003c/code\u003e\n\t\t\t\t\u003cbr\u003eThis value is \u003cb\u003eOPTIONAL\u003c/b\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003ehorizontalGradient\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eThe horizontal gradient to make the text more visible.  Enter gradient stops as an array.\u003cbr\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003e[\n\t\t\t\t\"rgba(0, 0, 0, 0.75) 0%\",\n\t\t\t\t\"rgba(0, 0, 0, 0) 40%\"\n\t\t\t\t]\u003c/code\u003e\n\t\t\t\t\t\t\t\u003cbr\u003e\u003cb\u003eDefault value:\u003c/b\u003e \u003ccode\u003e[\n\t\t\t\t\"rgba(0, 0, 0, 0.75) 0%\",\n\t\t\t\t\"rgba(0, 0, 0, 0) 40%\",\n\t\t\t\t\"rgba(0, 0, 0, 0) 80%\",\n\t\t\t\t\"rgba(0, 0, 0, 0.75) 100%\"\n\t\t\t\t]\u003c/code\u003e\n\t\t\t\t\u003cbr\u003eThis value is \u003cb\u003eOPTIONAL\u003c/b\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n        \u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003eradialGradient\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eA radial gradient to make the text more visible.  Enter gradient stops as an array.\u003cbr\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003e[\n\t\t\t\t\"rgba(0, 0, 0, 0.75) 0%\",\n\t\t\t\t\"rgba(0, 0, 0, 0) 40%\"\n\t\t\t\t]\u003c/code\u003e\n\t\t\t\t\t\u003cbr\u003e\u003cb\u003eDefault value:\u003c/b\u003e \u003ccode\u003e[\n                    \"rgba(0,0,0,0) 0%\",\n                    \"rgba(0,0,0,0) 75%\",\n                    \"rgba(0,0,0,0.25) 100%\"\"\n\t\t\t\t]\u003c/code\u003e\n\t\t\t\t\u003cbr\u003eThis value is \u003cb\u003eOPTIONAL\u003c/b\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n    \t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003egradientDirection\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eThe direction of the gradient\u003cbr\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003e'horizontal'\u003c/code\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eDefault value:\u003c/b\u003e \u003ccode\u003e'vertical'\u003c/code\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003ePossible values:\u003c/b\u003e \u003ccode\u003e'vertical', 'horizontal', 'both', 'radial'\u003c/code\u003e\n\t\t\t\t\u003cbr\u003eThis value is \u003cb\u003eOPTIONAL\u003c/b\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003ebackgroundAnimationEnabled\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eBoolean value, if set to true the background will scroll if the picture is larger than the screen size (e.g. for panaramic pictures).  The picture will either scroll vertically or horizontally depending on which dimension extends beyond the screen size.\n\t\t\t\u003cb\u003eNote:\u003c/b\u003e For this to work, backgroundSize must be set to cover.\u003cbr\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003etrue\u003c/code\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eDefault value:\u003c/b\u003e \u003ccode\u003efalse\u003c/code\u003e\n\t\t\t\t\u003cbr\u003eThis value is \u003cb\u003eOPTIONAL\u003c/b\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003etransitions\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eArray value containing strings defining what transitions to perform.\n\t\t\t\u003cb\u003eNote:\u003c/b\u003e transitionImages must be set to true.\u003cbr\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003e['opacity', 'slideFromLeft']\u003c/code\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eDefault value:\u003c/b\u003e \u003ccode\u003e['opacity', 'slideFromRight', 'slideFromLeft', 'slideFromTop', 'slideFromBottom', 'slideFromTopLeft', 'slideFromTopRight', 'slideFromBottomLeft', 'slideFromBottomRight', 'flipX', 'flipY']\u003c/code\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003ePossible values:\u003c/b\u003e \u003ccode\u003e'opacity', 'slideFromRight', 'slideFromLeft', 'slideFromTop', 'slideFromBottom', 'slideFromTopLeft', 'slideFromTopRight', 'slideFromBottomLeft', 'slideFromBottomRight', 'flipX', 'flipY'\u003c/code\u003e\n\t\t\t\t\u003cbr\u003eThis value is \u003cb\u003eOPTIONAL\u003c/b\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003etransitionTimingFunction\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eCSS timing function used with transitions.\n\t\t\t\u003cb\u003eNote:\u003c/b\u003e transitionImages must be set to true.\u003cbr\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003e'ease-in\u003c/code\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eDefault value:\u003c/b\u003e \u003ccode\u003e'cubic-bezier(.17,.67,.35,.96)'\u003c/code\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003ePossible values:\u003c/b\u003e \u003ccode\u003e'ease', 'linear', 'ease-in', 'ease-out', 'ease-in-out', 'cubic-bezier(n,n,n,n)'\u003c/code\u003e\n\t\t\t\t\u003cbr\u003eThis value is \u003cb\u003eOPTIONAL\u003c/b\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003eanimations\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eArray value containing strings defining what animations to perform.\n\t\t\t\u003cb\u003eNote:\u003c/b\u003e backgroundAnimationEnabled must be set to true.\u003cbr\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003e'ease-in\u003c/code\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eDefault value:\u003c/b\u003e \u003ccode\u003e['slide', 'zoomOut', 'zoomIn']\u003c/code\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003ePossible values:\u003c/b\u003e \u003ccode\u003e'slide', 'zoomOut', 'zoomIn'\u003c/code\u003e\n\t\t\t\t\u003cbr\u003eThis value is \u003cb\u003eOPTIONAL\u003c/b\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003echangeImageOnResume\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003eShould the image be changed in the moment the module resumes after it got hidden?\n\t\t\t\t\u003cbr\u003e\u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003etrue\u003c/code\u003e\n\t\t\t\t\u003cbr\u003e\u003cb\u003eDefault value:\u003c/b\u003e \u003ccode\u003efalse\u003c/code\u003e\n\t\t\t\t\u003cbr\u003eThis value is \u003cb\u003eOPTIONAL\u003c/b\u003e\n\t\t\t\u003c/td\u003e\n\t\t\u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n### How to manually exclude images from a folder:\ncreate a file called `excludeImages.txt` that you put in the same folder as the images you want to exclude (one for each directory!)\nadd the filenames you want to exclude to the file, one filename per row.\nthat's it!\n\n## Developer commands\n\n- `npm run lint` - Run linting and formatter checks.\n- `npm run lint:fix` - Fix linting and formatter issues.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdarickc%2FMMM-BackgroundSlideshow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdarickc%2FMMM-BackgroundSlideshow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdarickc%2FMMM-BackgroundSlideshow/lists"}