Problema al rotar el dispositivo
Publicado por rlcesar (1 intervención) el 27/04/2020 12:22:55
Hola a todos.
Estoy diseñando una web, en la que utilizo slick slider, que me genera un slide de un máximo de tres elementos, con una imagen, y un texto. Hasta aquí todo bien. El slide funciona correctamente en cualquier dispositivo, y todo se ve de forma adecuada.
El problema es que, para que se vea todo el contenido del slider, necesito calcular la altura del contenedor, y a la hora de redimensionar el slide me surgen varios problemas. El primero, que creo que está resuelto, era que cada texto puede tener una longitud diferente, y por lo tanto tener una, dos o tres líneas. Por esa parte no hay problema, ya que lo que he hecho es calcular la altura de los tres slides, y seleccionar la más alta para poner el alto del contenedor.
Cuando cargo la página, todo se ve bien. El problema llega al rotar los dispositivos, ya que la altura que vuelve a calcular es la misma que tenía antes, y no entiendo el motivo. Además, en el css tengo definida una opción diferente para cuando el ancho de la ventana es mayor o igual a 1024 pixels, y, por ejemplo, en un iPad, al rotar el dispositivo (1024x768 de resolución), no me aplica el cambio hasta que no recargo la página. ¿Podría alguien echarme una mano con este tema?
Os dejo el script que he creado para todo lo que he contado.
Muchas gracias de antemano por la ayuda.
Saludos
Estoy diseñando una web, en la que utilizo slick slider, que me genera un slide de un máximo de tres elementos, con una imagen, y un texto. Hasta aquí todo bien. El slide funciona correctamente en cualquier dispositivo, y todo se ve de forma adecuada.
El problema es que, para que se vea todo el contenido del slider, necesito calcular la altura del contenedor, y a la hora de redimensionar el slide me surgen varios problemas. El primero, que creo que está resuelto, era que cada texto puede tener una longitud diferente, y por lo tanto tener una, dos o tres líneas. Por esa parte no hay problema, ya que lo que he hecho es calcular la altura de los tres slides, y seleccionar la más alta para poner el alto del contenedor.
Cuando cargo la página, todo se ve bien. El problema llega al rotar los dispositivos, ya que la altura que vuelve a calcular es la misma que tenía antes, y no entiendo el motivo. Además, en el css tengo definida una opción diferente para cuando el ancho de la ventana es mayor o igual a 1024 pixels, y, por ejemplo, en un iPad, al rotar el dispositivo (1024x768 de resolución), no me aplica el cambio hasta que no recargo la página. ¿Podría alguien echarme una mano con este tema?
Os dejo el script que he creado para todo lo que he contado.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function calcularAltura() {
if ($(window).width() < 1024) {
var $altura1 = $('#imagen1').height() + $('#textos1').height();
var $altura2 = $('#imagen2').height() + $('#textos2').height();
var $altura3 = $('#imagen3').height() + $('#textos3').height();
var $altura = Math.max($altura1, $altura2, $altura3);
console.log($altura);
$('div.main-slider').attr('style', function() { return 'height:' + $altura + '!important;' });
console.log($altura);
} else {
$('div.main-slider').attr('style', function() { return 'height:500px!important;' });
console.log('Establecido en 500');
}};$(document).ready(function() {
calcularAltura();
});
window.addEventListener("orientationchange", function() {
calcularAltura();
}, false);
Muchas gracias de antemano por la ayuda.
Saludos
Valora esta pregunta
0