MMM-Carousel - how to configure a module multiple times on the SAME page?

Fantasmic78

@mumblebaj
Yes, thanks - I’m aware of the MMM-page-indicator, but I prefer the navigation buttons from MMM-Carousel (big left/right icons, in addition to the clickable indicators for the number of pages).

Fantasmic78

@plainbroke yes exactly - and I managed to do it like this in the meanwhile.

As mentioned in one of the posts above - the key learning was to use the same carouselId for all modules (which I use multiple times) which should be on the same page.

So my configuration for MMM-Carousel looks like this now:

{
            module: 'MMM-Carousel',
            position: 'bottom_bar', // Required only for navigation controls
            config: {
                transitionInterval: 15000,
                showPageIndicators: true,
                showPageControls: true,
                ignoreModules: ['clock', 'alert', 'updatenotification'],
                mode: 'slides',
                slides: {
                    "1": [
                            {name:'calendar', carouselId: "Calendar1"}, // Calendar of Chris
                            {name:'calendar', carouselId: "Calendar1"}, // Calendar of Karin
                            'MMM-WeeklySchedule'
                         ],
                    "2": [
                            {name:'calendar', carouselId: "Calendar2"}, // Calendar for trash
                            {name:'calendar', carouselId: "Calendar2"}, // Calendar for Austrian holidays
                            {name:'calendar', carouselId: "Calendar2"}, // Calendard for birthdays
                            'newsfeed'
                         ],
                    "3": [
                            {name:'weather', carouselId: "Weather1"}, // current weather at home
                            {name:'weather', carouselId: "Weather1"}, // weather forecast at home
                            {name:'weather', carouselId: "Weather1"}, // weather in some other location
                            'MMM-network-signal',
                            'MMM-NetworkConnection'
                         ],
                    "4": [
                            'MMM-GooglePhotos'
                         ]
                }
            }
		},

It shows two calendars on the first page, and 3 other calendars on the second page. Further, it shows 3 weather modules on the third page.

Fantasmic78

@kristjanesperanto I think the best place for such documentation would be in section “Example - Advanced Slides Carousel” in the README.md. You could use my example configuration (see my other post above)

KristjanESPERANTO

Thanks 🙂 I’ve created a Pull Request.

reverendz

@Fantasmic78

Found this because this is just what I’m trying to do.

I’m trying to use the EXT3 calendar showing monthly views.

However, when I try the config, one of two things happens:

If I list a position for the additional months, they all show up on the same page.
If I don’t list a position, the other months don’t show up.

I can’t seem to get it so that one month shows up with a forward/backward option in Carousel when using MMM-CalendarExt3.

If anyone has an example config and can step me through how to set this up with Carousel it’d be greatly appreciated.

I liked Carousel because I only want to move the calendar forward, but I’m open to other options. The big thing is: I’m using a touch screen so really want on-screen navigation/click.

sdetweil

@reverendz use mmm-pages, carousel is hard code to use module names.

in pages you can define page names , mom, dad , son , daughtrr, weather, shopping, whatever

and on each module using the classes:property to specify which page(s) this instance is on

i have a setup w 3 CalendarExt3 instances
this month, next and next after that

sdetweil

@reverendz use MMM-PageIndicator for manual navigation
see this post i made showing all the configuration

https://forum.magicmirror.builders/post/118877

reverendz

@sdetweil

Thank you for the response!

So I am a bit lost. I tried pages and after figuring out the “fixed” vs. “pages” bit, I can’t seem to change the page-indicators to buttons.

The only thing I found was this:

.MMM-page-indicator div.module-content div i:nth-child(2)::before {
    content: "\f055";  // <-- icon code goes here
    font-family: FontAwesome;
}

As a newbie, “code goes here” leaves me grasping. Does your link have another solution or is there somewhere I can complete the content?

Other than that, I saw someone basically created a custom button module to do the same.

sdetweil

@reverendz sorry you didn’t get the link to the link

see here
https://forum.magicmirror.builders/post/118877

reverendz

@sdetweil

Thank you. I got the link and I still don’t get it.

I am lost. The icons that show up look like standard MMM-page-indicator buttons.

I added this based on the image, but it probably doesn’t apply since I’m not using the posters icons.

/* MMM-page-indicator config to turn indicator into buttons */
.MMM-page-indicator div module-content div i:nth-child(1):: before { 
font-size: 20px; content: "\f073"; font-family: FontAwesome;
}
.MMM-page-indicator div module-content div i:nth-child(2):: before { 
font-size: 20p; content: "\f2c9"; font-family: FontAwesome;
}
.MMM-page-indicator div module-content div i:nth-child(3):: before { 
font-size: 20px; content: "\f1b9"; font-family: FontAwesome;
}
.MMM-page-indicator div module-content div i:nth-child(4):: before { 
font-size: 20px; content: "|f70c"; font-family: FontAwesome;
}
.MMM-page-indicator div module-content div i:nth-child(5):: before { 
font-size: 20px; content: "\f19d"; font-family: FontAwesome;
}
.MMM-page-indicator div.module-content div i:nth-child(6)::before { 
font-size: 20px; content: " flea";
font-family: FontAwesome;
}
.MMM-page-indicator div module-content div i:nth-child(7):: before { 
font-size:20px; content: "\f03d"; font-family: FontAwesome;
}
.MMM-page-indicator div module-content div i:nth-child(8)::before { 
font-size: 20px; content: "\e5ac" font-family: FontAwesome;
}
.MMM-page-indicator div module-content div i:nth-child(9):: before { 
font-size: 20px; content: "\f5ee"; font-family: FontAwesome;
}
.MMM-page-indicator div module-content div i:nth-child (10): :before { 
font-size: 20px; content: " f013"; font-family: FontAwesome;
}

I just have 3 pages I want to cycle through that coincide with the EXT3 calendar this month, next month and the one after.

What am I missing?