Cada item da lista, <li>, será um item do carrossel
Insira dois <a>’s para criar os controles de navegação
Um <a> deve ter a classui_carouselPrev e o outro ui_carouselNext.
Insira um elemento para receber os itens de paginação
Coloque a classui_carouselPage (essse elemento pode ser qualquer tag Html)
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
Use em ui_carrousel o atributo data-page e informe a quantidade de itens para ser navegado por vez. Padrão: data-page="1"
Use em ui_carrousel o atributo data-pos para informar o item inicial. Padrão: data-pos="4"
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"
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"
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"
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();
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.
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.
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.
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.
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.
