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.