Para quien use Foundation para implementar un diseño responsive en sus webs, es decir, adaptable a distintos dispositivos (móviles, tabletas, ordenadores), le sucederá que si implementa sliders deslizantes, ya sean horizontales o verticales dentro de tabs, es decir, pestañas, estos no funcionarán bien si la pestaña que los contiene no es la principal, la que esta activa al cargarse el navegador.
Este problema no un bug de Foundation, sino que javascript decide los pasos del slider en función de sus dimensiones, pero al estar insertados en un contenedor (la pestaña) que no se muestra de inicio, que está con un display:none, estas dimensiones no existen y cuando definitivamente se muestra la pestaña, el funcionamiento es incorrecto.
Para solucionar este problema, hay que forzar a javascript a recalcular estas métricas, lo cual es sencillo mediante la función Reflow de Foundation:
$(document).foundation('reflow');
Lo más conveniente es que cuando la pestaña cambie, comprobemos si es la que contiene los sliders y entonces ejecutemos el reflow.
$('#tabs-id').on('toggled', function (event, tab) {
if(tab.attr("id")==="panel2") {
$(document).foundation('reflow');
}
});
611 visitas.
