Diaporamas avec composant Featured Tiles sur mobiles ?

[Dennis_P_Z]

Je souhaite avoir un carrousel en haut de la page d’accueil de mon site et des pages de catégorie, certains sujets et images mis en avant peuvent être sélectionnés et désignés via un panneau de configuration.

Précédemment, je souhaitais avoir l’effet suivant sur les appareils de bureau et mobiles

Celui-ci donne une idée mais le travail est toujours en cours

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

J’ai donc suivi les conseils de @Moin pour essayer le composant Featured Tiles. Cependant, il n’y a pas d’effet carrousel et ce n’est pas adapté aux mobiles. J’ai fait quelques modifications pour y parvenir

Ordinateur

Mobile

Cependant, il y a deux problèmes côté mobile,

1. Lorsque je vais sur la page d’accueil depuis la page du sujet, l’effet carrousel échoue, sauf si je clique à nouveau sur le bouton d’accueil, il semble que le javascript ne soit pas chargé.

2. Une erreur TypeError se produit
   

   

Javascript que j’utilise

<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 Des solutions ou des idées ?

[Lilly (Lillian Louis)]

Salut @Dennis_P_Z

Je pense que vous pourriez obtenir ce que vous voulez avec ce composant :

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]

Merci mais c’est différent

[Lilly (Lillian Louis)]

@Dennis_P_Z

Ensuite, j’ai obtenu ce composant mais il n’affiche rien…

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

Il est indiqué en cours de développement sur le lien.

[Moin]

Peut-être que l’un de ces composants est une alternative. Vous pouvez placer les sujets en haut, mais il n’y a pas de carrousel.

• Homepage Feature
• Featured Topics
• Featured Tiles

[Dennis_P_Z]

Salut @Moin Merci pour tes conseils. Je vais essayer de voir si je peux rendre le carrousel possible :clin d’œil:

[Arkshine]

Je l’ai testé par curiosité. Le composant fonctionne bien.
Vous avez besoin d’au moins 2 images, et il est restreint à la route /categories pour une raison quelconque.

.

[Lilly (Lillian Louis)]

hah sympa ! Je n’ai pas testé. J’ai juste supposé d’après l’OP et que parce que c’était indiqué en cours de développement et qu’il n’y avait pas d’informations méta sur le dépôt git, cela ne fonctionnait pas.

Aussi, super composant.

[Dennis_P_Z]

@Moin J’ai essayé avec Featured Files, j’ai finalement réussi le carrousel en utilisant du CSS et du JavaScript personnalisés, mais du CSS supplémentaire doit être ajouté pour qu’il soit convivial sur mobile

[Moin]

N’oubliez pas de partager votre #composant-thème à la fin

[Dennis_P_Z]

Salut @Arkshine
J’ai besoin de la fonctionnalité sur la page d’accueil et les pages de catégorie, mieux encore, l’image peut être rappelée dans le sujet. Nous donnerons plus de temps à l’auteur

J’ai mis à jour mon sujet d’origine, jetez-y un œil et si vous avez des idées
Bénédictions !
@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)]

Le recadrage est assez mauvais Où sont les yeux du chiot ?!

Idéalement, le rapport hauteur/largeur doit être conservé.

Je suggère de conserver la hauteur tout en centrant l’image horizontalement.

[Dennis_P_Z]

C’est vrai, c’est toujours une question de choix sur les petits écrans, les images déformées ne sont pas acceptables

[Arkshine]

@Dennis_P_Z

J’ai besoin de la fonctionnalité sur la page d’accueil et les pages de catégorie, mieux encore, l’image peut être rappelée dans le sujet. Nous donnerons plus de temps à l’auteur.

Si vous souhaitez toujours essayer ce composant, je l’ai forké pour ajouter un paramètre show_on où vous pouvez choisir où l’afficher.

URL : https://github.com/Arkshine/discourse-big-carousel-component
Nom de la branche : feature/new_settings

(Je ne connais pas l’état du composant d’origine, j’espère qu’il est acceptable de le forker et je ne suis pas sûr si je devrais leur proposer les modifications).

[Dennis_P_Z]

@Arkshine

Si vous souhaitez toujours essayer ce composant, je l’ai forké pour ajouter un paramètre show_on où vous pouvez choisir où l’afficher.

Merci. Honnêtement, ce serait très utile pour le composant et ses utilisateurs.

[Aizada_M]

Bonjour ! Excellent travail
Hier, j’ai installé ce composant de thème, tout fonctionne bien sauf :

1. Lorsque je fais défiler le carrousel, à un moment donné, l’image se divise en deux, mais ce n’est pas toujours le cas. Voici un exemple :
   

2. Après avoir cliqué sur un bouton dans le carrousel, je suis le lien vers une autre page et après être revenu à la page d’accueil, le contenu de la bannière diminue de taille. Ce n’est pas une erreur permanente et cela peut se produire à tout moment. Voici un exemple de l’erreur :
   

Pour information. Sur le bureau, j’ai utilisé le navigateur Chrome, et sur le smartphone Android, j’ai utilisé le navigateur Huawey.

Bien sûr, je comprends que ce composant est encore en développement, mais j’ai décidé de partager l’information avec vous quand même.

[Arkshine]

Par défaut, l’image se répète en fonction de l’espace disponible. Vous pouvez modifier ce comportement avec du CSS. Je vais créer un paramètre pour contrôler l’image, par exemple sa position, sa taille, etc.

Pour le moment, vous pouvez jouer avec les propriétés : background. (!important est nécessaire)

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

2. Je ne parviens pas à le reproduire. Cependant, j’ai pu voir une erreur dans la console une fois (je ne la vois plus) ; c’est peut-être lié. Je vais regarder !

[Aizada_M]

Bonjour !
Merci pour le conseil , je vais essayer votre version CSS, j’espère que ça aidera

[Aizada_M]

Bonjour à nouveau
J’ai joué avec CSS et j’ai apprécié la possibilité de contrôler l’arrière-plan de l’image dans le carrousel . J’espérais également que CSS résoudrait mon problème initial. Dans l’état normal, les images du carrousel changent sans problème, mais dès que je clique sur l’un des boutons latest, new ou active, lors du changement d’images et de contenu dans le carrousel, leur intégrité est violée - le début apparaît à la fin et la fin apparaît au début. C’est apparemment une erreur système

[Arkshine]

Merci pour vos commentaires ; j’essaierai plus tard.