Você está usando um navegador desatualizado. Para a visualização correta, atualize seu navegador:

Mapa do site


SimpleUi

Atualizando

Código para Galeria de imagens Download

? - +
Slide de imagens
  1. Envolva as imagens que irão compor a galeria dentro de um elemento com a classe ui_gallery
    • É essencial que as imagens tenham as mesmas dimensões
  2. Insira a legenda no atributo alt de cada imagem
    • A legenda aceita tags Html, como <b>, <i>, <em>, <strong>, <u>, <br />, etc.
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. Se achar necessário, gere o permalink para cada imagem da galeria:
    • Para isso, insira o atributo data-link="true" em ui_gallery
    • Dessa forma, é possível capturar a URL de cada imagem, seja para compartilhar ou abrir através de um endereço específico.
  2. Por padrão, as miniaturas das imagens aparecem na navegação
    • Para retirar as miniaturas, use em ui_gallery o atributo data-thumb="false"
    • Mas atenção: os itens da lista que compõe a paginação devem ter a mesma largura para que o carrossel calcule a dimensão e as posições ao rodar
  3. A navegação deve girar 1 miniatura por vez.
    • Para alterar esse padrão, use em ui_gallery o atributo data-steps e informe o valor desejado, ex: data-steps="4"
  4. A navegação tem início e fim
    • Para deixá-la em loop, use em ui_gallery o atributo data-loop="true"
  1. Pode usar mais de uma vez na mesma página. Cada ui_gallery será independente
Customizar


Número de imagens

Exibir imagens.
Insira quantas imagens forem necessárias, desde que tenham as mesmas dimensões

Navegação e Paginação

. Padrão: sem loop (false).

. Padrão: exibir (true). Saiba mais
É recomendado que os itens da lista tenham a mesma largura, caso opte por não exibir miniaturas. Isso garante que o carrossel calcule a posição exata durante a paginação.

Paginar itens por vez.
Para melhor visualização, insira várias imagens à galeria.

Caminho

A URL o caminho da imagem. Padrâo: não exibir (false) Saiba mais
Os navegadores modernos são capazes de trocar a url em tempo de execução.
Uma vez habilitada, as galerias geram links permanentes, facilitando o acesso ao conteúdo.
Habilte essa função e observe a barra de endereço do navegador.
Tem certeza que deseja reiniciar todos os valores?

Resultado para Galeria de imagens