Mensaje viejo, lo sé.
Lo tenemos trabajando en producción con el ciclo. Cycle2 no era y aún no es una opción para nosotros. Desafortunadamente, implica modificar los datos internos del ciclo. Afortunadamente, la solución es sencilla.
Cuando el plugin ciclo se inicia, añade dos propeties cycleW y cycleH a cada uno de objeto DOM sus diapositivas con, respectivamente, la anchura inicial y la altura de cada diapositiva. Cycle utiliza estas propiedades para animar cada diapositiva independientemente de la dimensión de la ventana.
Cuando se cambia el tamaño de la ventana, debe borrar cycleW y cycleH manualmente o configurarlos a un valor predeterminado.
Ejemplo (asumiendo que su contenedor de diapositivas es .slideshow):
$(".slideshow").children("div").each(function(){
this.cycleW = $(this).width();
this.cycleH = $(this).height();
});
Tenemos que trabajar muy bien en la producción.
html se ve así:
<div class="slideshow">
<div class="slide"><img src=".." width="100%" height="auto"/></div>
<div class="slide"><p>Copy copy copy no photo on slide </p></div>
<div class="slide"><img src=".." width="100%" height="auto"/></div>
<div class="slide"><p>Copy copy copy no photo on slide </p></div>
...
</div>
Ahora la función de ventana de cambio de tamaño. Esta es nuestra versión. Es posible que deba personalizar esto para que se ajuste a sus necesidades. Básicamente, almacenamos la proporción inicial para los casos en que tenemos imágenes fijas en la presentación de diapositivas. Hay veces que tenemos presentaciones de diapositivas de altura variable. Este código aborda ambas situaciones. A continuación, se restablece los valores internos y cycleW cycleH de cada elemento DOM de diapositivas para adaptarse a su contenedor principal
$(window).resize(function(){
// first time around, save original width & height for ratios and complicated preloading
$(".slideshow").each(function(i,elt){
var originalWidth = $(elt).data("originalWidth"); // check existence of our ratio cache
if (typeof originalWidth == "undefined") {
var containerWidth = $(elt).parent().first().width(); // auto scale to container width.
var containerHeight = $(elt).parent().first().height();
$(elt).data("originalWidth",containerWidth);
$(elt).data("originalHeight",containerHeight);
}
});
// fix slideshows to their container width
$(".slideshow").each(function(i,elt){
var containerWidth = $(elt).parent().first().width();
var originalWidth = $(elt).data("originalWidth")*1;
var originalHeight = $(elt).data("originalHeight")*1;
var height = Math.floor(originalHeight*containerWidth/originalWidth); // maintain original ratio
$(elt).css("width", containerWidth+"px").css("height",height+"px"); // container actual dimensions. height might get reset again below
$(elt).children("div").css("width", containerWidth+"px"); // reset each slide width
// (fails once slide moves out, because the cycle plugin will use a cached value)
$(elt).children("div").children().css("width", containerWidth+"px"); // fix direct children (images or divs - images should have height auto).
// recompute max height based on inside slide, not just photos.
// some slideshows have variable height slides.
var maxHeight = 0;
var panelArray = $(elt).children("div");
for (var i = 0; i < panelArray.length; i++) {
var height = $(panelArray[i]).height();
if (height > maxHeight) maxHeight = height;
}
if (maxHeight > 0) {
$(elt).height(maxHeight);
}
// fix internal cycle dimension cache (cycleW and cycleH on each slide)
$(elt).children("div").each(function(){
this.cycleW = containerWidth;
this.cycleH = maxHeight;
});
});
});
he cambiado la propiedad containerResize true y luego funcionó, pero entonces no es sensible anymore..maybe ayuda. . – Boyye
¡no, debe ser receptivo! Gracias a – Blowsie
No estoy seguro si está abierto a otra pieza de tecnología, pero me encanta y uso [Carril Dinámico de Wilto] (https://github.com/Wilto/Dynamic-Carousel). –