Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Carousel-Widget einstellen

    NEWS

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    Carousel-Widget einstellen

    This topic has been deleted. Only users with topic management privileges can see it.
    • M
      M.Siemens last edited by

      Moin zusammen,

      gibt es eine Möglichkeit das Carousel-Widget etwas zu beeinflussen/einzustellen, evtl per CSS?
      Genau geht es mir um folgende Punkte:

      • Reihenfolge definieren in der die Widget/Gruppen angezeigt werden.
      • Die "hinteren" Widget/Gruppen komplett aus blenden lassen, statt nur etwas Transparent.

      Ich wollte eigentlich sowas wie hier das dritte Beispiel bauen, allerdings dann mit bedienbaren Elementen, daher der Versuch mit dem Carousel, oder hat jemand eine andere Idee?

      Vielen Dank für euere Hilfe

      liv-in-sky Markus Huber 2 Replies Last reply Reply Quote 0
      • liv-in-sky
        liv-in-sky @M.Siemens last edited by

        @m-siemens sagte in Carousel-Widget einstellen:

        Reihenfolge definieren in der die Widget/Gruppen angezeigt werden.

        die reihenfolge scheint abhängig vom zeitpunkt des anlegens des widgets - ein neues widget wird am ende des view-json-files angelegt - das widget scheint diese reihen folge zu nehmen

        das ausblenden bekomme ich nur zeitverzögert hin (habe opacity mit 0.1 gewählt - also noch leicht sichtbar - kann auch auf 0 gesetzt werden, dann weiß man aber nicht mehr, wo genau man klicken soll - mit einem jquery script- in etwa so:

        test-carousel(1).gif

        M 1 Reply Last reply Reply Quote 0
        • M
          M.Siemens @liv-in-sky last edited by

          @liv-in-sky Entschluldige die späte Rückmeldung, leider kam bei uns eine momentan verbreitete Viruserkrankung dazwischen 🤒

          Das mit der Reihenfolge ist schwar schade, aber machbar.
          Zu dem Ausblenden: Ich hab später 8 Elemente, das Vordere soll voll sichtbar, die anderen halb, oder abgestuft werden und das hintere komplett durchsichtig sein, da es sonst bei dem Vordersten im Hintergrund sichtbar ist.
          Die Transparenz hab in dem Hintergrund der Gruppe eingestellt und nicht im Carousel, damit die Schrift nicht durscheint.

          Navigator.gif

          wie sieht der script zu dem jquery bei dir aus? Hab im selbst schrieben noch nicht so die Erfahrung.

          liv-in-sky 1 Reply Last reply Reply Quote 0
          • liv-in-sky
            liv-in-sky @M.Siemens last edited by liv-in-sky

            @m-siemens sagte in Carousel-Widget einstellen:

            der abgestuft werden und das hintere komplett durchsichtig sein

            das wird auf meine art wahrscheinlich nicht funktionieren, da die im hintergrund befindenden widgets alle die selben klassen benutzen und ich das hintere nicht lokalisieren kann. oder es findet sich jmd, der jquery besser beherrscht und eine idee dazu hat

            das script dazu gehört im vis-editor in den scripte ab

            
            let timeout111 = 10500; //Zeit abhängig bis alle widgets geladen sind
              setTimeout( () => {
                  
                  $(".roundabout-moveable-item").not(".roundabout-in-focus").css({"opacity": "0.1"});
            
            $("[class*='roundabout-moveable-item']").click(function () { 
                  setTimeout( () => { 
                   $(".roundabout-moveable-item").not(".roundabout-in-focus").css({"opacity": "0.1"});
                  }, 2000)
            });
              }, timeout111);
            
            
            

            Image 081.png

            Erklärung: der äußere timeout ist dafür da, darauf zu warten,dass das widget geladen wird - hier kannst du etwas spielen ud den timeout wahrscheinlich etwas niedriger einstellen

            der zweite timeout wird gebraucht, da das widget auch zeitverzögert reagiert und erst nach dieser reaktion kann ich das opacity attribut ändern - wenn es bei dir nicht funktioniert evt. wert etwas vergrößern z.b. 2500, 3000, 3500

            1 Reply Last reply Reply Quote 0
            • Markus Huber
              Markus Huber @M.Siemens last edited by

              @m-siemens habe dir eine chat-Nachricht gesendet!

              1 Reply Last reply Reply Quote 0
              • First post
                Last post

              Support us

              ioBroker
              Community Adapters
              Donate

              1.0k
              Online

              31.6k
              Users

              79.6k
              Topics

              1.3m
              Posts

              vis
              3
              5
              338
              Loading More Posts
              • Oldest to Newest
              • Newest to Oldest
              • Most Votes
              Reply
              • Reply as topic
              Log in to reply
              Community
              Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
              The ioBroker Community 2014-2023
              logo