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

Mapa do site


SimpleUi

Atualizando

Código para Carrossel Download

? - +
Carrossel de itens
  1. Crie um contâiner <div> e use a class ui_carousel
    • Dentro desse contâiner, crie uma lista <ul>
    • Cada item da lista, <li>, será um item do carrossel
  2. Insira dois <a>’s para criar os controles de navegação
    • Um <a> deve ter a class ui_carouselPrev e o outro ui_carouselNext.
  3. Insira um elemento para receber os itens de paginação
    • Coloque a class ui_carouselPage (essse elemento pode ser qualquer tag Html)
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. Use em ui_carrousel o atributo data-page e informe a quantidade de itens para ser navegado por vez. Padrão: data-page="1"
  2. Use em ui_carrousel o atributo data-pos para informar o item inicial. Padrão: data-pos="4"
  3. Use em ui_carrousel o atributo data-full para exibir 1 item por vez, data-full="2" para 2 itens por vez e assim sucessivamente. Padrão: data-full="false"
  4. Somente para carrossel com data-full e data-page maior que 1, use em ui_carrousel o atributo data-loop="true" para deixá-lo em loop padrão: data-loop="false"
  5. Somente para carrossel com data-full, data-page maior que 1 e data-loop="true", use em ui_carrousel o atributo data-autoplay e indique o valor em milissegundos para que o carrossel mova sozinho padrão: data-autoplay="false"
  6. Use em ui_carrousel o atributo data-resize="true" para remontar o carrossel ao redimensionar o navegador. Muito útil quando há estilos diferentes setados em callbefore_carousel();
  1. Pode usar mais de um carrossel na mesma página.
    • Cada ui_carouselPage, ui_carouselPrev e ui_carouselNext irá atuar no ui_carousel mais próximo de acordo com a ordem de renderização da página.
    • Exemplo: o primeiro ui_carouselPage, ui_carouselPrev e ui_carouselNext irá atuar no primeiro ui_carousel, o segundo ui_carouselPage, ui_carouselPrev e ui_carouselNext irá atuar no segundo ui_carousel renderizado no código-fonte e assim sucessivamente.
    • Ou seja, não é necessário que um contenha o outro.
  2. Antes do início do carrossel, usuários avançados podem implementar uma função do tipo callbefore
    • Para isso, crie a função callbefore_carousel(); e implemente as ações que irão ocorrer antes de montagem do carrossel
    • A função pode ser útil para manipular atributos data-* ou demais caracteristicas dos carrosseis (existindo mais de um carrossel, considere usar id’s para identificá-las)
    • Essa função não é obrigatória, ou seja, só será executada se existir. Caso positivo, para evitar duplicidades, lembre-se de implementar a função callbefore em arquivos específicos, presentes nas respectivas páginas finais, já que o seu objetivo não é genérico.
  3. Evitar estilo inline quando usar data-resize, pois o estilo inserido pela Ui para o comportamento full deve ser removido ao remontar o carrossel em um estilo não full e isso só é obtido removendo todos os estilos inline, incluindo estilos inseridos pelo usuário, já que não há um modo de retornar somente aqueles destinados ao full.
  4. Se o carrossel estiver dentro de um modal, garanta que o estilo Css da lista do carrossel (principalmente margin e padding) não herde comportamentos da janela modal.
Customizar

Número de itens

Exibir itens.

Navegação

Navegar itens por vez. Evite valores não divisiveis pelo nº de itens ou maiores que itens visíveis
Iniciar no º item da paginação. Padrão: 1" item

Layout

Padrão: Não (false) e exibir itens por vez Padrão: 1.
e auto-play de ms. Padrão: Sem auto-play e loop (false)
Saiba mais
Loop e Autoplay somente para carrossel com data-full="1" e data-page="1". Para outros fomatos, considere um carrossel com vários itens visíveis por vez (e/ou que navega vários itens por vez) como um carrossel comum (data-full=1) com um único item visível por vez, mas com vários itens dentro de um item contendo outros itens. Assim, obtêm-se o mesmo efeito desejado.
Se não optar pelo fullscreen, recomenda-se que a soma dos itens de uma lista tenha o mesmo valor da largura do contâiner onde o carrossel está inserido.
Exemplo: Para um carrossel inserido em um contâiner de 500px, insira itens <li>’s com larguras multiplas de 500, seja 500px (para exibir 1 item por vez), 250px (para 2 itens visíveis por vez) e assim por diante.
Tem certeza que deseja reiniciar todos os valores?

Resultado para Carrossel