Sliders de carrossel com componente de Tiles em destaque em celulares?

Dev
1

Quero ter um slider carrossel no topo da página inicial do meu site e nas páginas de categoria, alguns tópicos e imagens em destaque podem ser selecionados e designados através do painel de configurações.

Anteriormente, eu queria ter o seguinte efeito em dispositivos desktop e mobile :point_down:

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

Este dá uma dica, mas o trabalho ainda está em andamento

Então, segui o conselho de @Moin para tentar o componente Featured Tiles. No entanto, não há efeito de carrossel e não é amigável para celulares. Fiz alguns trabalhos para conseguir isso :point_down:

Desktop

Mobile

No entanto, existem dois problemas no lado mobile,

  1. Quando vou para a página inicial a partir da página do tópico, o efeito carrossel falha, a menos que eu clique no botão home novamente, parece que o javascript não foi carregado

  2. Ocorre um TypeError não capturado

    image
    image1695×328 43.5 KB

Javascript que estou 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 Alguma solução ou ideia?

1 curtida
2

Olá @Dennis_P_Z :wave:

Acredito que você possa conseguir o que deseja com este componente:

1 curtida
3

Obrigado, mas é diferente

4

Diz que está em andamento no link.

2 curtidas
5

Talvez um desses componentes seja uma alternativa. Você pode colocar tópicos no topo, mas não há carrossel.

1 curtida
6

Olá @Moin Obrigado pela ajuda. Tentarei ver se consigo fazer o carrossel funcionar :wink:

7

Acabei de testar por curiosidade. O componente funciona bem.
Você precisa de pelo menos 2 imagens, e ele está restrito à rota /categories por algum motivo. :slight_smile:

chrome_LYxltGVnmc
.

2 curtidas
8

hah legal! :ok_hand: Eu não testei. Apenas presumi com base no OP e que, como dizia em andamento e não havia informações de tópico meta no repositório git, não estava funcionando. :woman_shrugging:t2:

Além disso, componente legal. :slight_smile:

1 curtida
9

@Moin Tentei com Arquivos em Destaque, finalmente consegui um carrossel usando CSS e JavaScript personalizados, mas CSS extra precisa ser adicionado para ser amigável em celulares :joy:

mmexport1697920795005

3 curtidas
10

:+1:
Não se esqueça de compartilhar seu Theme component no final

3 curtidas
11

Olá @Arkshine
Preciso do recurso na página inicial e nas páginas de categoria, melhor ainda se a imagem puder ser referenciada dentro do tópico. Daremos mais tempo ao autor :yum:

Atualizei meu tópico original, por favor, dê uma olhada e se tiver alguma ideia
Abraços!
@Lilly @Moin

1 curtida
12

O corte nisso parece muito ruim :frowning: Onde estão os olhos do cachorrinho?! :cry:

Idealmente, a proporção deve ser mantida.

Sugiro que você mantenha a altura enquanto centraliza a imagem horizontalmente.

1 curtida
13

Verdade, é sempre uma questão de escolha em telas pequenas, imagens distorcidas não são boas :rofl:

1 curtida
15

Se você ainda quiser tentar este componente, eu o forkei para adicionar uma configuração show_on onde você pode escolher onde exibi-lo.

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

image
image706×324 7.01 KB

(Não sei qual é o status do componente original, espero que não haja problema em fazer um fork dele :pray: e não tenho certeza se devo propor as alterações a eles).

4 curtidas
16

Obrigado. Honestamente, isso seria muito útil para o componente e seus usuários.

1 curtida
17

Olá! Ótimo trabalho :+1:
Ontem instalei este componente de tema, tudo funciona bem, exceto:

  1. Ao rolar o carrossel, em algum momento a imagem se divide em duas, mas isso não acontece sempre. Aqui está um exemplo:

  2. Depois de clicar no botão no carrossel, sigo o link para outra página e, ao retornar à página inicial, o conteúdo do banner diminui de tamanho. Este não é um erro permanente e pode ocorrer a qualquer momento. Aqui está um exemplo do erro:

Para informação. No desktop, usei o navegador Chrome, e no smartphone Android, usei o navegador Huawey

Claro, entendo que este componente ainda está em desenvolvimento, mas decidi compartilhar as informações com você mesmo assim.

18

Por padrão, a imagem se repete com base no espaço disponível. Você pode alterar esse comportamento com algum CSS. Farei uma configuração para controlar a imagem, por exemplo, sua posição, tamanho e assim por diante.

No momento, você pode brincar com as propriedades background. (!important é necessário)

.custom-big-carousel-slide {
    background-repeat: no-repeat !important;
}
  1. Não consigo reproduzir. :thinking: No entanto, vi um erro no console uma vez (não consigo vê-lo novamente); talvez esteja relacionado. Verei!
2 curtidas
19

Olá! :raising_hand_man:
Obrigado pela dica :raised_hands:, vou tentar usar sua versão CSS, espero que ajude :slightly_smiling_face:

20

Olá novamente :wave:
Brinquei com CSS e gostei da capacidade de controlar o fundo da imagem no carrossel :ok_hand: . Eu também esperava que o CSS resolvesse meu problema original. No estado normal, as imagens no carrossel mudam sem problemas, mas assim que clico em um dos botões latest, new ou active, ao mudar imagens e conteúdo no carrossel, sua integridade é violada - o início aparece no final e o final aparece primeiro. Aparentemente, este é um erro do sistema :pensive:

21

Obrigado pelo feedback; vou tentar mais tarde. :+1:

1 curtida