MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

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

    Scheduled Pinned Locked Moved Troubleshooting
    carouselmmm-carouselnavigationslidepage
    27 Posts 9 Posters 13.6k Views 9 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S Offline
      shbatm Module Developer
      last edited by

      @beeficecream - Welcome to the project and I’m glad you got it working. I just wanted to leave this here for anyone who needs it in the future:

      To use multiple instances of the same module with Carousel w/ Navigation:
      This example allows for 2 different style clocks on different slides:

      In the OTHER module’s config, add a CarouselId variable:

      {
              module: "clock",
              position: "middle_center",
              config: {
                  carouselId: "1",
                  displayType: "both"
              }
          }, {
              module: "clock",
              position: "top_left",
              config: {
                  carouselId: "2",
              }
          },
      

      In the MMM-Carousel config slides section, instead of just "clock", use {name:"clock", carouselId:"1"}

          ...
          mode: 'slides',
          slides: [
              [   {name:'clock', carouselId: "1"} ],
              [   {name:'clock', carouselId: "2"}, 'calendar', 'MMM-WunderGround', 'newsfeed' ] ]
          ...
      

      You can also use the same object format to move a module around for different slides or change the sizes. See https://github.com/shbatm/MMM-Carousel#example---advanced-slides-carousel for details.

      B L 2 Replies Last reply Reply Quote 2
      • B Offline
        beeficecream @shbatm
        last edited by

        @shbatm I wasn’t expecting a drop-in from the designer/developer - thank you for taking the time to expand on the original Carousel, I’m a big fan of the module!

        Also thank you for these notes! I was having trouble understanding how to utilize the carouselId values and where exactly to put them, this information cleared it up perfectly for me! This should keep things a bit more organized in my config file.

        1 Reply Last reply Reply Quote 1
        • L Offline
          lamachine @shbatm
          last edited by

          @shbatm I sort of got it working, but having problems with the calendar setup. I followed the advice for config.js with adding carouselID: “#” and then the {name: ‘calendar’, carouselID: “#”, but with three pages and three calendars, all three show up on the first slide, and none on the other two.

          Anything obviously missing?

          {
                                  module: "calendar",
                                  header: "Boy's Calendar",
                                  position: "top_left",
                                  carouselId: "1",
                                  config: {
                                          calendars: [
                                                  {
                                                          symbol: "calendar-check-o",
                                                          url: "https://calendar.google.c$
                                                  }
                                          ]
                                  }
                          },
          
          
          module: 'MMM-Carousel',
                              config: {
                                  transitionInterval: 10000,
                                  ignoreModules: ['clock', 'alert','currentweather', 'com$
                                  mode: 'slides',
                                  slides: [
                                      ['calendar'],
                                      [   {name:'calendar', carouselID:"2"}, 'MMM-darksky$
                                      [   {name:'calendar', carouselID:"3"}, 'weatherfore$
                                   ]
                              }
          
          

          :::

          Spoiler Text

          :::

          S 1 Reply Last reply Reply Quote 0
          • S Offline
            shbatm Module Developer @lamachine
            last edited by

            @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.

            L 1 Reply Last reply Reply Quote 0
            • L Offline
              lamachine @shbatm
              last edited by

              @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.

              S 1 Reply Last reply Reply Quote 0
              • S Offline
                shbatm Module Developer @lamachine
                last edited by

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

                1 Reply Last reply Reply Quote 0
                • R Offline
                  robiv8
                  last edited by

                  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 :thinking_face:

                  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. :smiling_face_with_open_mouth:

                  S 1 Reply Last reply Reply Quote 0
                  • S Offline
                    shbatm Module Developer @robiv8
                    last edited by

                    @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'],
                                    }
                    
                    1 Reply Last reply Reply Quote 0
                    • M Offline
                      mcneilp
                      last edited by

                      Does anyone know if it is possible with this module to have the first slide show for a longer period of time…then rotate through the other slides. This way you mainly see the primary one, and secondary ones periodically rotate through.

                      1 Reply Last reply Reply Quote 0
                      • N Offline
                        NicB72
                        last edited by

                        So I am having a problem with the carouselID item as well

                        In slides config I have this

                                            slides: [
                                                    ["clock"],
                                                    [{name:"weather", carouselId:"1"}],
                                                    [{name:"weather", carouselId:"2"}],
                                                    ["newsfeed"],
                                                    ["calendar"]
                                            ]
                        

                        Then below I have the 2 modules.
                        I have the other modules as well!

                        Everything displays except these 2 weather slides where I get nothing,.

                                    {
                                            module: "weather",
                                            position: "middle_center",
                                            config: {
                                                    carouselId: "1",
                                                    type: "current",
                                                    weatherProvider: "openweathermap",
                                                    units: "imperial",
                                                    roundTemp: true,
                                                    onlyTemp: false,
                                                    location: "Concord",
                                                    locationID: "4933743",
                                                    apiKey: "cc448befd6aea28cbb05457253a9622b"
                                                    }
                                    },
                                    {
                                            module: "weather",
                                            position: "middle_center",
                                            config: {
                                                    carouselId: "2",
                                                    type: "forecast",
                                                    weatherProvider: "openweathermap",
                                                    units: "imperial",
                                                    location: "Concord",
                                                    locationID: "4933743",
                                                    apiKey: "cc448befd6aea28cbb05457253a9622b", 
                                                  }
                        

                        },

                        S 1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 2 / 3
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Sam, technical setup by Karsten.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy