Hello,
I want to display a picture which is bigger than the screen. The height of the pic is bigger than the height of the screen, so I used the backgroundAnimationEnabled Option of the MMM-BackgroundSlideshow module. Now the picture scrolls either from top to bottom, or from bottom to top. But I want that it only scrolls from top to bottom. Is there any option to set that?

Here is my config entry of the module:

{ module: 'MMM-BackgroundSlideshow', position: 'fullscreen_below', config: { imagePaths: ['modules/MMM-BackgroundSlideshow/bt-background/'], slideshowSpeed: 86400, transitionImages: true, randomizeImageOrder: true, transitionSpeed: '0s', backgroundAnimationEnabled: true, backgroundPosition: 'top', backgroundSize: 'cover', animations: ['slide'], backgroundAnimationLoopCount: '1', backgroundAnimationDuration: '5s', }, },

Thanks for any help

actually this is because you have fired a timer on the slide update

showSlides2: function () { if (!this.slideIndex) { this.slideIndex = 0; } var i; var slides = document.getElementsByClassName("mySlides"); for (i = 0; i < slides.length; i++) { console.log(slides[i]); slides[i].style.display = "none"; } this.slideIndex++; slides[this.slideIndex - 1].style.display = "block"; if (this.slideIndex > (slides.length - 1)) { this.slideIndex = 0 } setInterval(this.showSlides2, 2000); //< ------- here restarts the function, BUT inside the function 'this'; becomes the context of the timer routine and not the module.. this.updateDom(1000); // or whatever transition time u want. },

to fix it you need an arrow function to keep context right

see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

but net

showSlides2: function () { if (!this.slideIndex) { this.slideIndex = 0; } var i; var slides = document.getElementsByClassName("mySlides"); for (i = 0; i < slides.length; i++) { console.log(slides[i]); slides[i].style.display = "none"; } this.slideIndex++; slides[this.slideIndex - 1].style.display = "block"; if (this.slideIndex > (slides.length - 1)) { this.slideIndex = 0 } setInterval( () => { this.showSlides2()} , 2000); // < --- was a typo here.. need () => { stuff } this.updateDom(1000); // or whatever transition time u want. },

@banbutcher so, there were two problems

0 cycle time
and carouselId

I had my brain screwed on crooked for carouselId.

suppose you had multiple instances of the same module name in config.js, showing different things on different slides.

when u define the slides, u use the module ‘name’, but in this case, name is not enough.

so, in the module definitions themselves u add another unique identifier, carouselId: somestring. the value can be anything.

in their config:{} section, that is where carousel module will look for ‘carouselId’

in the slide definition, when u come to that module to be displayed, instead of putting the name in quotes, you need a little structure

{ name: "module name", carouselId:"samevalue_added_to_module_config" } ,

that way the carousel module can tell which module instance should be shown