Karussell-Slider mit Featured Tiles-Komponente auf Mobilgeräten?

[Dennis_P_Z]

Ich möchte einen Karussell-Schieberegler oben auf meiner Website-Homepage und auf Kategorieseiten haben. Einige hervorgehobene Themen und Bilder können über ein Einstellungsfeld ausgewählt und zugewiesen werden.

Zuvor wollte ich auf Desktop- und Mobilgeräten den folgenden Effekt erzielen:

Dieses hier gibt einen Hinweis, aber die Arbeit ist noch im Gange

GitHub - discourse/discourse-big-carousel-component: Work in progress

Also habe ich @Moin um Rat gefragt, die Featured Tiles-Komponente auszuprobieren. Es gibt jedoch keinen Karussell-Effekt und sie ist nicht mobilfreundlich. Ich habe einige Arbeiten durchgeführt, um dies zu erreichen:

Desktop

Mobil

Es gibt jedoch zwei Probleme auf der Mobilseite:

1. Wenn ich von der Thema-Seite zur Homepage wechsle, schlägt der Karussell-Effekt fehl, es sei denn, ich klicke erneut auf die Home-Schaltfläche. Es scheint, dass JavaScript nicht geladen wird.

2. Es tritt ein Uncaught TypeError auf.
   

   

Verwendetes JavaScript:

<script type="text/discourse-plugin" version="0.8.13">
window.onload = function() {

let slideshowInterval;

function initSlideshow() {
  const container = document.querySelector(".featured-tiles-container");
  const tiles = document.querySelectorAll(".featured-tile");
  const slideWidth = tiles[0].offsetWidth;
  let currentIndex = 0;
  let canSlide = true;

  function slideLeft() {
    if (canSlide) {
      canSlide = false;
      currentIndex = (currentIndex + 1) % tiles.length;
      const offset = -currentIndex * slideWidth;
      container.style.transition = "transform 0.5s ease-in-out";
      container.style.transform = `translateX(${offset}px)`;

      setTimeout(() => {
        canSlide = true;
        container.style.transition = "none";
      }, 500);
    }
  }

  function startSlideshow() {
    slideLeft();
    slideshowInterval = setInterval(slideLeft, 3000);
  }

  startSlideshow();
}

function destroySlideshow() {
  clearInterval(slideshowInterval);
}

api.onPageChange((url) => {
  destroySlideshow();
  if (url === "/" || url.indexOf("/c/") === 0) {
    initSlideshow();
  }
});

}
</script>

@Arkshine @Lilly Gibt es Lösungen oder Ideen?

[Lilly (Lillian Louis)]

Hallo @Dennis_P_Z

Ich glaube, Sie können das mit dieser Komponente erreichen, die Sie wollen:

Topic List Previews (TLP)

This is a Theme Component but has the option to add a complementary plugin. Summary The original Topic Preview component that allows you to add images and excerpts (and more!) to the Topic List whilst being able to configure what additions appear on what list. Repository Link GitHub - merefield/discourse-tc-topic-list-previews: Enriches the content and layout of topic lists Install Guide Installing a theme or theme component …

[Dennis_P_Z]

Danke, aber es ist anders

[Lilly (Lillian Louis)]

@Dennis_P_Z

Dann habe ich diese Komponente erhalten, aber sie zeigt nichts an…

GitHub - discourse/discourse-big-carousel-component: Work in progress

Auf dem Link steht, dass es sich in Arbeit befindet.

[Moin]

Vielleicht ist eine dieser Komponenten eine Alternative. Sie können Themen oben platzieren, aber es gibt kein Karussell.

• Homepage Feature
• Featured Topics
• Featured Tiles

[Dennis_P_Z]

Hallo @Moin Danke für den Rat. Ich werde versuchen, ob ich ein Karussell machen kann

[Arkshine]

Ich habe es nur aus Neugier getestet. Die Komponente funktioniert einwandfrei.
Sie benötigen mindestens 2 Bilder und sie ist aus irgendeinem Grund auf die Route /categories beschränkt.

.

[Lilly (Lillian Louis)]

hah nice! Ich habe nicht getestet. Ich habe es einfach vom OP angenommen und weil es hieß, dass es sich in Arbeit befindet und keine Meta-Themeninformationen im Git-Repo vorhanden waren, dass es nicht funktionierte.

Außerdem, coole Komponente.

[Dennis_P_Z]

@Moin Ich habe es mit Featured Files versucht, schließlich einen Karussell mit benutzerdefiniertem CSS und JavaScript erreicht, aber zusätzliches CSS muss hinzugefügt werden, damit es auf Mobilgeräten freundlich ist

[Moin]

Vergessen Sie nicht, am Ende Ihre Theme component zu teilen

[Dennis_P_Z]

Hallo @Arkshine
Ich benötige die Funktion auf der Homepage und den Kategorieseiten, besser noch, das Bild kann innerhalb des Themas aufgerufen werden. Wir geben dem Autor mehr Zeit

Ich habe mein ursprüngliches Thema aktualisiert, bitte schau es dir an und wenn du Ideen hast
Segen!
@Lilly @Moin

Carousel sliders with Featured Tiles component on mobiles?

I want to have a carousel slider on top of my site homepage and category pages, some featured topics and images can be selected and designated through setting panel. Previously I wanted to have the following effect on both desktop and mobile devices [carousel-cover-1200x900] This one gives a hint but the work is still in progress So I took advice from @Moin to try Featured Tiles component. However there’s no carousel effect and not friendly to mobiles. I did some work to achie…

[merefield (Robert)]

Das Zuschneiden sieht ziemlich schlecht aus Wo sind die Augen des Welpen?!

Idealerweise sollte das Seitenverhältnis beibehalten werden.

Ich schlage vor, die Höhe beizubehalten und das Bild horizontal zu zentrieren.

[Dennis_P_Z]

Stimmt, es ist immer eine Frage der Wahl bei kleinen Bildschirmen, verzerrte Bilder sind nicht in Ordnung

[Arkshine]

@Dennis_P_Z

Ich brauche die Funktion auf der Homepage und den Kategorieseiten, besser noch, das Bild kann innerhalb des Themas aufgerufen werden. Wir werden dem Autor mehr Zeit geben

Wenn Sie diese Komponente immer noch ausprobieren möchten, habe ich sie geforkt, um eine show_on-Einstellung hinzuzufügen, mit der Sie auswählen können, wo sie angezeigt werden soll.

URL: https://github.com/Arkshine/discourse-big-carousel-component
Branch-Name: feature/new_settings

(Ich weiß nicht, wie der Status der ursprünglichen Komponente ist, ich hoffe, es ist in Ordnung, sie zu forken und ich bin mir nicht sicher, ob ich ihnen die Änderungen vorschlagen sollte).

[Dennis_P_Z]

@Arkshine

Wenn du diese Komponente trotzdem ausprobieren möchtest, habe ich sie geforkt, um eine show_on-Einstellung hinzuzufügen, mit der du auswählen kannst, wo sie angezeigt werden soll.

Danke. Ehrlich gesagt wäre das sehr hilfreich für die Komponente und ihre Benutzer.

[Aizada_M]

Hallo! Tolle Arbeit
Gestern habe ich diese Theme-Komponente installiert, alles funktioniert gut, außer:

1. Wenn ich durch den Karussell scrolle, teilt sich das Bild irgendwann in zwei Teile, aber das passiert nicht immer. Hier ist ein Beispiel:
   

2. Nachdem ich auf den Button im Karussell klicke, folge ich dem Link zu einer anderen Seite und nach der Rückkehr zur Startseite verringert sich die Größe des Inhalts im Banner. Dies ist kein permanenter Fehler und kann jederzeit auftreten. Hier ist ein Beispiel für den Fehler:
   

Zur Information. Auf dem Desktop habe ich den Chrome-Browser verwendet, und auf dem Android-Smartphone habe ich den Huawey-Browser verwendet.

Natürlich verstehe ich, dass diese Komponente noch in der Entwicklung ist, aber ich habe beschlossen, die Informationen trotzdem mit Ihnen zu teilen.

[Arkshine]

Standardmäßig wiederholt sich das Bild basierend auf dem verfügbaren Speicherplatz. Sie können dieses Verhalten mit etwas CSS ändern. Ich werde eine Einstellung vornehmen, um das Bild zu steuern, z. B. seine Position, Größe und so weiter.

Im Moment können Sie mit den background-Eigenschaften spielen. (!important ist erforderlich)

.custom-big-carousel-slide {
    background-repeat: no-repeat !important;
}

2. Ich kann es nicht reproduzieren. Ich konnte jedoch einmal einen Fehler in der Konsole sehen (kann ihn nicht wieder sehen); vielleicht hängt es damit zusammen. Mal sehen!

[Aizada_M]

Hallo!
Danke für den Tipp , ich werde versuchen, deine CSS-Version auszuprobieren, ich hoffe, sie hilft

[Aizada_M]

Hallo nochmal
Ich habe mit CSS herumgespielt und die Möglichkeit, den Hintergrund des Bildes im Karussell zu steuern, hat mir gefallen . Ich hatte auch gehofft, dass CSS mein ursprüngliches Problem lösen würde. Im normalen Zustand ändern sich die Bilder im Karussell ohne Probleme, aber sobald ich auf eine der Schaltflächen latest, new oder active klicke, wird beim Ändern von Bildern und Inhalten im Karussell deren Integrität verletzt - der Anfang erscheint am Ende und das Ende erscheint zuerst. Anscheinend ist das ein Systemfehler

[Arkshine]

Danke für das Feedback; ich werde es später ausprobieren.