Um tempo atrás montei um carrossel que trazia um desafio bem legal, precisava de um tamanho fixo para funcionar, porém, eu não sabia quantos itens teriam dentro de cada carrossel.
No começo foi meio complicado, mas cheguei a uma solução bem simples com javascript usando a propriedade clientWidth.
No exemplo tínhamos um numero x de LI e a UL deveria ter um tamanho fixo para o carrossel funcionar, o tamanho de LI é fixo, a idéia é:
Retornar o numero de LI dentro da UL, multiplicar a quantidade de LI pelo tamanho de UL, simples não é?
function AtivaCarrossel(id)
{
var cr = document.getElementById(id);
window['carrossel_'+id] = cr;
cr.lis = cr.getElementsByTagName("li");
cr.tamanhoUl = cr.lis[0].clientWidth * cr.lis.length;
cr.ul.style.width = cr.tamanhoUl + "px";
}
Entendendo:
Pego o carrossel que vamos usar:
var cr = document.getElementById(id);
Crio uma variável pra ele:
window['carrossel_'+id] = cr;
Monto um Array com as LI dentro dele:
cr.lis = cr.getElementsByTagName("li");
Uso a largura da primeira LI e multiplico pela quantidade de itens dentro do array:
cr.tamanhoUl = cr.lis[0].clientWidth * cr.lis.length;
E finalmente aplicamos com um estilo em linha a largura no carrossel:
cr.ul.style.width = cr.tamanhoUl + "px";
IMPORTANTE: a propriedade clientWidth não retorna margem ou borda, apenas a largura “liquida”!
