• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.

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

Scheduled Pinned Locked Moved Solved Troubleshooting
29 Posts 6 Posters 9.6k Views 6 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.
  • P Offline
    plainbroke @Fantasmic78
    last edited by plainbroke Feb 20, 2022, 9:21 PM Feb 20, 2022, 9:16 PM

    @fantasmic78
    This is what 2 instances of calendar look like in my carousel setup.
    Capture.JPG

    is that what you are trying to do?

    Slow learner. But trying anyways.

    F 1 Reply Last reply Feb 22, 2022, 8:40 AM Reply Quote 0
    • F Offline
      Fantasmic78 @mumblebaj
      last edited by Feb 22, 2022, 8:23 AM

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

      1 Reply Last reply Reply Quote 1
      • F Offline
        Fantasmic78 @plainbroke
        last edited by Feb 22, 2022, 8:40 AM

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

        R 1 Reply Last reply Dec 30, 2024, 3:18 AM Reply Quote 0
        • F Offline
          Fantasmic78 @KristjanESPERANTO
          last edited by Feb 22, 2022, 8:56 AM

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

          K 1 Reply Last reply Feb 23, 2022, 9:16 PM Reply Quote 0
          • K Offline
            KristjanESPERANTO Module Developer @Fantasmic78
            last edited by Feb 23, 2022, 9:16 PM

            Thanks 🙂 I’ve created a Pull Request.

            1 Reply Last reply Reply Quote 0
            • R Offline
              reverendz @Fantasmic78
              last edited by Dec 30, 2024, 3:18 AM

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

              S 1 Reply Last reply Dec 30, 2024, 3:42 AM Reply Quote 0
              • S Offline
                sdetweil @reverendz
                last edited by sdetweil Dec 31, 2024, 12:19 PM Dec 30, 2024, 3:42 AM

                @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

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                S 1 Reply Last reply Dec 30, 2024, 4:00 AM Reply Quote 0
                • S Offline
                  sdetweil @sdetweil
                  last edited by sdetweil Jan 3, 2025, 10:32 PM Dec 30, 2024, 4:00 AM

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

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

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  R 1 Reply Last reply Jan 3, 2025, 10:16 PM Reply Quote 0
                  • R Offline
                    reverendz @sdetweil
                    last edited by Jan 3, 2025, 10:16 PM

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

                    S 1 Reply Last reply Jan 3, 2025, 10:24 PM Reply Quote 0
                    • S Offline
                      sdetweil @reverendz
                      last edited by sdetweil Jan 3, 2025, 10:26 PM Jan 3, 2025, 10:24 PM

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

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

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      R 1 Reply Last reply Jan 3, 2025, 10:31 PM 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