MagicMirror² v2.7.0 is available! For more information about this release, check out this topic.

Could use some assistance setting up MMM-Carousel w/ Navigation and understanding the architecture


  • Module Developer

    @lamachine the carouselId: "1" needs to be inside the calendar module’s config section (move it down a line).

    Also if you just put ‘calendar’ in a slide, it will show every calendar, each one needs a carouselId.



  • @shbatm

    wow, the developer again, thanks so much for the quick reply!

    I thought I was making some progress, but still not quite right…

    Code changes as follows

    module: 'MMM-Carousel',
                        config: {
                            transitionInterval: 10000,
                            ignoreModules: ['clock', 'alert','currentweather', 'com$
                            mode: 'slides',
                            slides: [
                                [ {name:'calendar', carouselID:"1"}],
    
    

    and

                           module: "calendar",
                            header: "Boy's Calendar",
                            position: "top_left",
                            config: {
                                    carouselId: "1",
                                    calendars: [
                                            {
                                                    symbol: "calendar-check-o",
                                                    url: "https
    

    I ran it through JSHint, so at least the formatting is acceptable.


  • Module Developer

    Check your capitalization in the MMM-Carousel config. It should be carouselId, not carouselID.



  • This is my config for test.

    {
                module: 'MMM-Carousel',
                position: 'bottom_bar', // Required only for navigation controls
                config: {
                    transitionInterval: 0,
                    showPageIndicators: true,
                    showPageControls: false,
                    ignoreModules: ['MMM-Podcast2', 'alert', 'MMM-Buttons', 'MMM-Remote-Control', 'MMM-Remote-Control-Repository'],
                    mode: 'slides',
                    slides: {
                        main: [{name:'clock', carouselId: "1"}],
                        "2": ['MMM-DarkSkyForecast', 'newsfeed'],
                        "3": ['MMM-DWD-WarnWeather'],
                        "4": ['MMM-DarkSkyForecast', 'newsfeed'],
                        "5": ['MMM-DWD-WarnWeather'],
                        "6": ['MMM-DarkSkyForecast', 'newsfeed']
                    }
                }
            },
    

    and this the two modules

    {
    module: "clock",
    name: "AnalogClock",
    position: "middle_center",
    config: {
    carouselId: "1",
    showDate: false,
    displayType: 'analog',
    analogSize: '540px',
    analogFace: 'face-001',
    secondsColor: '#FF0000',
    analogPlacement: 'top'
    }
    },
    {
    module: "clock",
    name: "AnalogClock2",
    position: "middle_center",
    config: {
    carouselId: "2",
    showDate: false,
    displayType: 'analog',
    analogSize: '570px',
    analogFace: 'face-001',
    secondsColor: '#FF0000',
    analogPlacement: 'top'
    }
    },
    

    but the clock is only visible on page 6?
    And the main page is completely missing!
    I am confused 🤔

    But then I tried the following:
    instead of
    main: [{name:‘clock’, carouselId: “1”}],
    I put this
    “1”: [{name:‘clock’, carouselId: “1”}],

    And what should I say! It works. 😃


  • Module Developer

    @robiv8 Strange. I wonder if it’s something with the word main. You could also try "Main".

    Here’s one of my carousel configs for another reference:

                    slides: {
                        Home: [{ name: 'clock', classes: 'zoom200', position: "middle_center", carouselId: 1 }],
                        Info: [{ name: 'clock', classes: 'zoom200', position: "top_center", carouselId: 1 },
                            { name: 'calendar', position: 'top_left' }, 'MMM-Todoist',
                            'MMM-DarkSkyForecast',
                            'newsfeed',
                        ],
                        Status: [{ name: 'clock', classes: '', position: "top_left", carouselId: 2 },
                            'MMM-JSONStatusChecker', "internet-monitor"
                        ],
                        ISY: [{ name: 'clock', classes: '', position: "top_left", carouselId: 2 }, 'MMM-ISY'],
                        Cameras: ["MMM-RTSPStream"],
                        Octopi: [{ name: 'clock', classes: '', position: "top_left", carouselId: 2 }, 'octomirror-module'],
                    }