Carousel slider con componente Featured Tiles sui dispositivi mobili?

Sviluppatore
1

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

carousel-cover-1200x900
carousel-cover-1200x9001200×900 25.2 KB

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

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

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

    image
    image1695×328 43.5 KB

Javascript che sto usando :point_down:

<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?

1 Mi Piace
2

Ciao @Dennis_P_Z :wave:

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

1 Mi Piace
3

Grazie ma è diverso

4

Dice che è un lavoro in corso sul link.

2 Mi Piace
5

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

1 Mi Piace
6

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

7

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

chrome_LYxltGVnmc
.

2 Mi Piace
8

hah bello! :ok_hand: 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. :woman_shrugging:t2:

Inoltre, bel componente. :slight_smile:

1 Mi Piace
9

@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 :joy:

mmexport1697920795005

3 Mi Piace
10

:+1:
Non dimenticare di condividere il tuo Theme component alla fine

3 Mi Piace
11

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

Ho aggiornato il mio argomento originale, dai un’occhiata e se hai qualche idea
Benedizioni!
@Lilly @Moin

1 Mi Piace
12

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

Idealmente, l’aspect ratio dovrebbe essere mantenuto.

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

1 Mi Piace
13

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

1 Mi Piace
15

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

image
image706×324 7.01 KB

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

4 Mi Piace
16

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

1 Mi Piace
17

Ciao! Ottimo lavoro :+1:
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.

18

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;
}
  1. Non riesco a riprodurlo. :thinking: Tuttavia, una volta ho visto un errore nella console (non riesco più a vederlo); forse è correlato. Vedremo!
2 Mi Piace
19

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

20

Ciao di nuovo :wave:
Ho giocato con il CSS e mi è piaciuta la possibilità di controllare lo sfondo dell’immagine nel carosello :ok_hand: . 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 :pensive:

21

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

1 Mi Piace