¿Deslizadores de carrusel con el componente de 'Featured Tiles' en dispositivos móviles?

Desarrollador
1

Quiero tener un carrusel en la parte superior de la página de inicio de mi sitio y en las páginas de categoría, se pueden seleccionar y designar algunos temas e imágenes destacadas a través del panel de configuración.

Anteriormente, quería tener el siguiente efecto tanto en dispositivos de escritorio como móviles :point_down:

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

Este da una pista pero el trabajo aún está en progreso

Así que tomé el consejo de @Moin para probar el componente Featured Tiles. Sin embargo, no tiene efecto de carrusel y no es amigable para móviles. Hice algo de trabajo para lograr esto :point_down:

Escritorio

Móvil

Sin embargo, hay dos problemas en el extremo móvil,

  1. Cuando voy a la página de inicio desde la página del tema, el efecto carrusel falla, a menos que haga clic en el botón de inicio nuevamente, parece que el javascript no se cargó.

  2. Ocurre un TypeError no capturado

    image
    image1695×328 43.5 KB

Javascript que estoy 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 ¿Alguna solución o idea?

1 me gusta
2

Hola @Dennis_P_Z :wave:

Creo que podrías lograr lo que quieres con este componente:

1 me gusta
3

Gracias, pero es diferente

4

Dice que está en progreso en el enlace.

2 Me gusta
5

Quizás uno de estos componentes sea una alternativa. Puedes poner temas en la parte superior pero no hay carrusel.

1 me gusta
6

Hola @Moin Gracias por el consejo. Intentaré si puedo hacer posible el carrusel :wink:

7

Lo probé por curiosidad. El componente funciona bien.
Necesitas al menos 2 imágenes y está restringido a la ruta /categories por alguna razón. :slight_smile:

chrome_LYxltGVnmc
.

2 Me gusta
8

¡jaja, genial! :ok_hand: No probé. Simplemente asumí por el OP y que, dado que decía que estaba en progreso y no había información de tema meta en el repositorio de git, no estaba funcionando. :woman_shrugging:t2:

Además, genial componente. :slight_smile:

1 me gusta
9

@Moin Intenté con Featured Files, finalmente logré un carrusel usando CSS personalizado y JavaScript, pero se necesita agregar CSS adicional para que sea amigable en dispositivos móviles :joy:

mmexport1697920795005

3 Me gusta
10

:+1:
No olvides compartir tu Theme component al final.

3 Me gusta
11

Hola @Arkshine
Necesito la función en la página de inicio y en las páginas de categoría, mejor aún si la imagen se puede recuperar dentro del tema. Le daremos más tiempo al autor :yum:

Actualicé mi tema original, por favor échale un vistazo y si tienes alguna idea.
¡Bendiciones!
@Lilly @Moin

1 me gusta
12

El recorte de eso se ve bastante mal :frowning: ¿¡Dónde están los ojos del cachorro?! :cry:

Idealmente, se debe mantener la relación de aspecto.

Sugiero mantener la altura mientras se centra la imagen horizontalmente.

1 me gusta
13

Es cierto, siempre es una cuestión de elección en pantallas pequeñas, las imágenes distorsionadas no están bien :rofl:

1 me gusta
15

Si aún quieres probar este componente, lo forkeé para agregar una configuración show_on donde puedes elegir dónde mostrarlo.

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

image
image706×324 7.01 KB

(No sé cuál es el estado del componente original, espero que esté bien forkearlo :pray: y no estoy seguro de si debería proponerles los cambios).

4 Me gusta
16

Gracias. Honestamente, eso sería de gran ayuda para el componente y sus usuarios.

1 me gusta
17

¡Hola! Gran trabajo :+1:
Ayer instalé este componente de tema, todo funciona bien excepto:

  1. Cuando me desplazo por el carrusel, en algún momento la imagen se divide en dos, pero esto no siempre ocurre. Aquí tienes un ejemplo:

  2. Después de hacer clic en el botón del carrusel, sigo el enlace a otra página y, al regresar a la página principal, el contenido del banner disminuye de tamaño. Este no es un error permanente y puede ocurrir en cualquier momento. Aquí tienes un ejemplo del error:

Para información. En el escritorio utilicé el navegador Chrome y en el teléfono inteligente Android utilicé el navegador Huawey.

Por supuesto, entiendo que este componente aún está en desarrollo, pero decidí compartir la información contigo de todos modos.

18

Por defecto, la imagen se repite según el espacio disponible. Puedes cambiar este comportamiento con CSS. Haré una configuración para controlar la imagen, por ejemplo, su posición, tamaño, etc.

Por el momento, puedes jugar con las propiedades de background. (Se necesita !important)

.custom-big-carousel-slide {
    background-repeat: no-repeat !important;
}
  1. No puedo reproducirlo. :thinking: Sin embargo, una vez vi un error en la consola (ya no lo veo); quizás esté relacionado. ¡Veré!
2 Me gusta
19

¡Hola! :raising_hand_man:
Gracias por el consejo :raised_hands:, intentaré probar tu versión CSS, espero que ayude :slightly_smiling_face:

20

Hola de nuevo :wave:
Jugué con CSS y me gustó la capacidad de controlar el fondo de la imagen en el carrusel :ok_hand: . También esperaba que CSS resolviera mi problema original. En el estado normal, las imágenes en el carrusel cambian sin problemas, pero tan pronto como hago clic en uno de los botones latest, new o active, al cambiar las imágenes y el contenido en el carrusel, su integridad se ve violada: el principio aparece al final y el final aparece al principio. Aparentemente, este es un error del sistema :pensive:

21

Gracias por tus comentarios; lo intentaré más tarde. :+1:

1 me gusta