Streaming live at 10am (PST)

Slider showing the same way in desktop and smartphone


#1

Hello, I’m trying to use 2 slider pages, the first for the GASTRONOMY database and the second for the PORTFOLIO database. It turns out that in the desktop view it appears 4 images and I would like the same way and positioning to happen in all views, that is, in tablet, smartphone also in the same way. In the smartphone view only 1 picture appears and not 4 as you would like.
Could someone give me a hand in what I’m doing wrong?
Thank you!





Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Oi @mdigital

Não entendi bem o que você está querendo fazer e qual o erro. Mas uma coisa que eu percebi, é que você está usando Grid para fazer um layout de uma só linha. Usar Grid é ótimo, mas nesse caso fica mais fácil pra você organizar o layout responsivo com Flexbox.

Pelo conteúdo do site e seu nome, acredito que sejas brasileiro, então respondi em português.
If you prefer I can talk to you in english aswell.


#3

olá Gilson, obrigado pelo retorno.
Eu estou tentando ter em uma linha apenas um grupo de imagens de destaques do banco de dados Gastronomia e Portfólio. Que corra apenas na horizontal e não vertical também. Não sei o que estou fazendo de errado. Vc pode me ajudar?
Eu tentei com slider (que é o que está atualmente no site), tentei de várias formas e não sei o que estou fazendo de errado.

obrigado. Em português fica mais fácil entender e de ser entendido!

abraço

Marcelo Ferreira de Araujo
Android


#4

Oi @mdigital

O que você quer fazer é um slider/carrossel que tenha sempre 4 imagens por slide não importando o tamanho da tela, seja desktop, tablet ou mobile.

As imagens devem ser sempre lado a lado na horizontal, nunca havendo repetição na vertical ou quebra de linha.

Presumindo que essas afirmações estejam corretas, montei este exemplo:
https://four-images-slider.webflow.io/

E o read-only link:
https://preview.webflow.com/preview/four-images-slider?utm_source=four-images-slider&preview=8d675a826e1998a44475b9e4e5e5e7ec


#5

Muito bacana Gilson! Agora e se for uma barra única onde eu tenha uns 24 fotos, metade do banco gastronomia e metade do banco portfolio? E que não importa onde ele seja visualizado (desktop, tablet ou smartphone) sempre apareça 4 imagens de uma vez?

Abraço


#6

Não entendi muito bem o que você quer dizer com metade do banco gastronomia e metade do banco portfolio.


#7

Eu falo em das 24 imagens que 12 sejam do banco de dados GASTRONOMIA e 12 sejam do bando de dados PORTFOLIO


#8

Basta trocar as imagens estáticas que eu coloquei por imagens vindas de Collections. No caso, como seriam 24 fotos, seriam:

  • Primeiro slide:
    • 4 imagens da primeira coleção
      • com filtro para exibir 4 imagens
      • filtro para iniciar da imagem 1
  • Segundo slide:
    • 4 imagens da primeira coleção
      • com filtro para exibir 4 imagens
      • filtro para iniciar da imagem 5
  • Terceiro slide:
    • 4 imagens da primeira coleção
      • com filtro para exibir 4 imagens
      • filtro para iniciar da imagem 9
  • Quarto slide:
    • 4 imagens da segunda coleção
      • com filtro para exibir 4 imagens
      • filtro para iniciar da imagem 1
  • Quinto slide:
    • 4 imagens da segunda coleção
      • com filtro para exibir 4 imagens
      • filtro para iniciar da imagem 5
  • Sexto slide:
    • 4 imagens da segunda coleção
      • com filtro para exibir 4 imagens
      • filtro para iniciar da imagem 9

#10

Olá Gilson, eu segui conforme o seu modelo, mas antes de adicionar imagem, eu adicionei um Link Block para abrir o post corrente e depois vem a imagem. Acontece que não seguiu o tamanho das imagens. Está tudo bagunçado. Se vc der uma olhada vai ver como ficou. Como eu posso ajustar todas as imagens para ficarem num tamanho igual em todos os campos?
Com relação ao que falei em ter uma barra única, seria sem slider, mas com scroll. Que tivesse uma barra de rolagem na horizontal, mostrando umas 24 imagens, todas no mesmo tamanho e sendo 12 do CMS Gastronomia e 12 do Portfólio.

Abraço