Adicionar um esquema de carrossel.

Learn DXPR BuilderBuild pagesAdd contentLay-out

Use o elemento de esquema Carousel quando quiser que os conteúdos se revezem num só lugar, como citações, ofertas ou anúncios. Fica com diapositivos que avançam sozinhos, com um ponto por diapositivo. Ao contrário de Image carousel, cada diapositivo leva quaisquer elementos: texto, imagens, botões e mais. O exemplo constrói um carrossel de citações de estudantes.

Um carrossel de citações de estudantes sobre uma faixa cinzenta clara com a citação de Aisha Khan e uma barra para cada um dos seus três diapositivos

  1. Paire o cursor sobre a coluna e clique em + na sua barra de controlos para abrir o seletor de elementos.
  2. No separador Layout, clique em Carousel.
  3. As suas definições abrem-se primeiro. Clique em Save para manter as predefinições. O carrossel aparece com um diapositivo vazio.
  4. Clique em + dentro do diapositivo e adicione conteúdo, como um elemento Text.
  5. Para adicionar um diapositivo, paire o cursor sobre o carrossel e clique em Add slide na sua barra de controlos. Clique no ponto do diapositivo por baixo do carrossel para o abrir e preencha-o da mesma forma.

O que vê

O primeiro diapositivo aparece com uma barra por diapositivo por baixo. De 5 em 5 segundos entra o diapositivo seguinte e, depois do último, volta o primeiro. Os visitantes podem clicar numa barra para saltar para um diapositivo ou deslizar o dedo num ecrã tátil. Cada diapositivo assume a altura do mais alto, para o conteúdo por baixo do carrossel não saltar.

Abra as definições em More > Settings na barra de controlos do Carousel. O painel General tem a temporização.

Definição O que faz Predefinição
Frames per slide Quantos diapositivos aparecem lado a lado, de 1 a 10. Os ecrãs estreitos mostram menos, até um nos telemóveis 1
Disable auto-play Impede os diapositivos de avançarem sozinhos Off
Auto-play interval Tempo entre diapositivos, de 1000 a 20000 milissegundos 5000
Stop on hover Pausa a reprodução automática enquanto o ponteiro está sobre o carrossel Off
Dots navigation No painel Dots: mostra um ponto por diapositivo On
Next/Previous No painel Next/Previous: mostra botões de setas Off

Pontos e setas

Com Dots navigation ligado, o painel Dots também oferece:

  • Dots orientation: Outside slider (por baixo) ou Inside slider
  • Dot shape: Bar, Circle, Square ou Triangle
  • Active dot transformation: None, Grow taller, Grow wider ou Scale up
  • Dot color e Active dot color

Com Next/Previous ligado, o painel Next/Previous também oferece:

  • Orientation: Outside slider ou Inside slider
  • Dot shape: o botão por trás de cada seta, No background, Circle, Square ou Bar
  • Icon color, Icon hover color, Background color e Background hover color
  • Outside navigation position: Adjacent, Top center, Top left, Top right, Bottom center, Bottom left ou Bottom right

Ideias para diapositivos

  • Testimonial slider: ponha um Block quote com a citação e um elemento Text com o nome em cada diapositivo. Mantenha Dots navigation ligado e Next/Previous desligado e defina Auto-play interval como 7000 para os visitantes acabarem de ler.
  • Hero carousel: abra More > Settings de um diapositivo e escolha uma foto como Background image no seu painel Style. Adicione um elemento Text com o cabeçalho e um Button. Ligue Stop on hover para os visitantes lerem e clicarem.

Se não o vir

  • Não há pontos por baixo do carrossel. Os pontos só aparecem quando o carrossel tem dois diapositivos e só com Dots navigation ligado. Clique em Add slide ou ligue Dots navigation no painel Dots.
  • O diapositivo novo não aparece depois de Add slide. Os diapositivos novos ficam no fim e escondidos até os abrir. Clique no último ponto por baixo do carrossel.
  • Os diapositivos não se movem sozinhos. Disable auto-play está ligado. Desligue-o no painel General das definições do carrossel.
  • Não há setas. Next/Previous vem desligado por predefinição. Ligue-o no painel Next/Previous.
  • Falta Carousel no separador Layout do seletor. O seu perfil de utilizador do DXPR Builder exclui-o. Um administrador marca Carousel em Elements no seu perfil em /admin/dxpr_studio/dxpr_builder/profile.

E a seguir?