Carousel slider con componente Featured Tiles sui dispositivi mobili?

[Dennis_P_Z]

Voglio avere uno slider carousel in cima alla homepage del mio sito e alle pagine di categoria, alcuni argomenti in primo piano e immagini possono essere selezionati e designati tramite il pannello delle impostazioni.

In precedenza volevo avere l’effetto seguente sia sui dispositivi desktop che mobili

Questo dà un suggerimento ma il lavoro è ancora in corso

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

Quindi ho preso consiglio da @Moin per provare il componente Featured Tiles. Tuttavia, non c’è effetto carousel e non è adatto ai dispositivi mobili. Ho fatto un po’ di lavoro per ottenere questo

Desktop

Mobile

Tuttavia ci sono due problemi sul lato mobile,

1. Quando vado alla homepage dalla pagina dell’argomento, l’effetto carousel fallisce, a meno che non clicchi di nuovo sul pulsante home, sembra che javascript non sia stato caricato

2. Si verifica un errore Uncaught TypeError
   

   

Javascript che sto usando

<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 Soluzioni o idee?

[Lilly]

Ciao @Dennis_P_Z

Credo che tu possa ottenere ciò che desideri con questo componente:

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]

Grazie ma è diverso

[Lilly]

@Dennis_P_Z

Poi ho ottenuto questo componente ma non mostra nulla…

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

Dice che è un lavoro in corso sul link.

[Moin]

Forse uno di questi componenti è un’alternativa. Puoi mettere gli argomenti in alto ma non c’è un carosello.

• Homepage Feature
• Featured Topics
• Featured Tiles

[Dennis_P_Z]

Ciao @Moin Grazie per il consiglio. Cercherò di vedere se riesco a rendere possibile il carosello

[Arkshine]

L’ho appena testato per curiosità. Il componente funziona bene.
Sono necessarie almeno 2 immagini e per qualche motivo è limitato al percorso /categories.

.

[Lilly]

hah bello! Non ho testato. Ho solo presunto dall’OP e che, poiché diceva work in progress e non c’erano informazioni sul tema meta nel repository git, non stesse funzionando.

Inoltre, bel componente.

[Dennis_P_Z]

@Moin Ho provato con Featured Files, alla fine ho ottenuto il carosello usando css personalizzato e javascript, ma è necessario aggiungere css extra per renderlo compatibile con i dispositivi mobili

[Moin]

Non dimenticare di condividere il tuo Theme component alla fine

[Dennis_P_Z]

Ciao @Arkshine
Ho bisogno della funzionalità sulla homepage e sulle pagine di categoria, meglio ancora se l’immagine può essere richiamata all’interno dell’argomento. Daremo più tempo all’autore

Ho aggiornato il mio argomento originale, dai un’occhiata e se hai qualche idea
Benedizioni!
@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)]

Il ritaglio sembra piuttosto brutto Dove sono gli occhi del cucciolo?!

Idealmente, l’aspect ratio dovrebbe essere mantenuto.

Suggerisco di mantenere l’altezza centrando l’immagine orizzontalmente.

[Dennis_P_Z]

Vero, è sempre una questione di scelta sui piccoli schermi, le immagini distorte non vanno bene

[Arkshine]

@Dennis_P_Z

Ho bisogno della funzionalità sulla homepage e sulle pagine di categoria, meglio ancora se l’immagine può essere richiamata all’interno dell’argomento. Daremo più tempo all’autore.

Se vuoi ancora provare questo componente, l’ho forkato per aggiungere un’impostazione show_on dove puoi scegliere dove visualizzarlo.

URL: https://github.com/Arkshine/discourse-big-carousel-component
Nome del branch: feature/new_settings

(Non so quale sia lo stato del componente originale, spero sia lecito forkare e non sono sicuro se dovrei proporre loro le modifiche).

[Dennis_P_Z]

@Arkshine

Se vuoi ancora provare questo componente, l’ho forkato per aggiungere un’impostazione show_on dove puoi scegliere dove visualizzarlo.

Grazie. Onestamente, questo sarebbe molto utile per il componente e i suoi utenti.

[Aizada_M]

Ciao! Ottimo lavoro
Ieri ho installato questo componente del tema, tutto funziona bene tranne:

1. Quando scorro il carosello, a un certo punto l’immagine si divide in due, ma non succede sempre. Ecco un esempio:
   

2. Dopo aver cliccato sul pulsante nel carosello, seguo il link a un’altra pagina e, tornando alla home page, il contenuto del banner si riduce. Questo non è un errore permanente e può verificarsi in qualsiasi momento. Ecco un esempio dell’errore:
   

Per informazione. Sul desktop ho utilizzato il browser Chrome e sullo smartphone Android ho utilizzato il browser Huawey

Naturalmente, capisco che questo componente è ancora in fase di sviluppo, ma ho deciso di condividere comunque le informazioni con te.

[Arkshine]

Per impostazione predefinita, l’immagine si ripete in base allo spazio disponibile. È possibile modificare questo comportamento con alcuni CSS. Creerò un’impostazione per controllare l’immagine, ad esempio la sua posizione, dimensione e così via.

Al momento, puoi giocare con le proprietà background. (!important è necessario)

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

2. Non riesco a riprodurlo. Tuttavia, una volta ho visto un errore nella console (non riesco più a vederlo); forse è correlato. Vedremo!

[Aizada_M]

Ciao!
Grazie per il suggerimento , proverò la tua versione CSS, spero che aiuti

[Aizada_M]

Ciao di nuovo
Ho giocato con il CSS e mi è piaciuta la possibilità di controllare lo sfondo dell’immagine nel carosello . Speravo anche che il CSS risolvesse il mio problema originale. Nello stato normale, le immagini nel carosello cambiano senza problemi, ma non appena faccio clic su uno dei pulsanti latest, new o active, quando cambio immagini e contenuti nel carosello, la loro integrità viene violata: l’inizio appare alla fine e la fine appare per prima. Apparentemente questo è un errore di sistema

[Arkshine]

Grazie per il feedback; ci proverò più tardi.