ejemplos - jquery bxslider css download

bxslider calculando el tamaño incorrecto de la ventana gráfica en la carga

Question

De todos modos, recientemente comencé a usar bxslider y tengo un problema con él.

Parece calcular el tamaño de la ventana gráfica de manera incorrecta en la carga de la página, lo que significa que no funciona bien en dispositivos móviles, tabletas, etc.

Lo extraño es que cuando redimensiono la ventana del navegador (incluso por un píxel) la altura de la ventana gráfica se calcula correctamente y todo se ve bien. Pero si actualizo la página con la misma altura y anchura, bx-viewport no se calcularía correctamente.

¿Alguna idea de por qué esto está pasando?

HTML se ve algo como esto (y sí, soy consciente de que probablemente no tenga nada que ver con eso, pero aún así):

<ul class="seminars-slider">
<li>
<article class="education-article">
<h3><a href="#"> Sit tincidunt eros massa, lundium ultrices, sit in aliquet velit</a></h3>
<p>LOL1</p>
<div class="buttons">
<a href="#" class="book-button"><span>Book now</span></a>
<a href="#" class="read-more"><span>Read more</span></a>
</div>
<div class="clearall"></div>
</article>
<div class="clearall"></div>
</li>
// same li
<li>
<article class="education-article">
<h3><a href="#"> Sit tincidunt eros massa, lundium ultrices, sit in aliquet velit</a></h3>
<p>LOL1</p>
<div class="buttons">
<a href="#" class="book-button"><span>Book now</span></a>
<a href="#" class="read-more"><span>Read more</span></a>
</div>
<div class="clearall"></div>
</article>
<div class="clearall"></div>
</li>
</ul> 

La llamada de js se parece a

slider=jQuery(''.seminars-slider'').bxSlider({
mode: ''vertical'',
controls:false,
pager:false,
minSlides:2,
maxSlides:2,
moveSlides:1
});
jQuery(''.up-control'').click(function() {
slider.goToNextSlide();
});
jQuery(''.down-control'').click(function() {
slider.goToPrevSlide();
});

Gracias.

Answer 1

"romelmederos" en la página de github bxslider sugerido;

"BxSlider v4.1 - Tener problemas con la representación del control deslizante ya que estoy usando porcentajes para la altura en un sitio web sensible para dispositivos móviles.

Así que tuve que hacer el cambio desde: slider.viewport.css (''height'', getViewportHeight ()); a esto: slider.viewport.css (''altura'', '''');

Alteré el complemento con una opción en mi copia, pero la forma más rápida de cambiar es modificando la línea de arriba "

Edité mi jquery.bxslider.js en la línea 1290; Esto funcionó muy bien para mí y parece una solución mejor que window.load, (con window.load el control deslizante se rompió hasta que todo se cargó).

Answer 2

Encontré una solución para este error de safari. Debe tener el modo del control deslizante en horizontal (no está seguro si la vertical también funciona pero el fundido no funciona en absoluto). Luego debes obtener la altura de la primera imagen y pasarla a ".bx-viewport". Así es como se ve mi guión:

$( "img.Banner" ).attr( "id", "first-slide" );
$(''.bxslider'').bxSlider({
adaptiveHeight: true,
mode: ''horizontal'',
auto: true
});
$("#first-slide").load(function(){
var height = $(this).height();
$( ".bx-viewport" ).css( "height", height );
});

Answer 3

Matthew Watson me dio una buena idea y entré en el complemento y actualicé la función real getViewPortHeight () así:

var getViewportHeight = function(){
var height = 0;
children = slider.children;
height = jQuery(slider.children[0]).height();;
return height;
}

Así que ahora está tomando la altura de la primera imagen allí (con suerte todos son iguales ...) y usándola para determinar la altura del control deslizante. Tenga en cuenta que sus controles seguirán estando debajo del control deslizante, pero esto puede solucionarse con la posición css, etc.

Espero que esto ayude a algunas personas perdidas por ahí.

Answer 4

Puede ser que estés llamando a la función bxSlider demasiado pronto. Si lo invocas desde

$(document).ready(function() { ... });

considere en su lugar usar

$(window).load(function() { ... });

La diferencia entre usar esas dos funciones es que (documento) .ready espera hasta que el DOM se haya mostrado al usuario en su estado inicial, mientras que (ventana) .load realmente espera hasta que todos los recursos se hayan cargado en el DOM.

Answer 5

Puedes usar

slider=jQuery(''.seminars-slider'').bxSlider({
mode: ''vertical'',
controls:false,
pager:false,
minSlides:2,
maxSlides:2,
moveSlides:1
});
setTimeout(function(){
slider.redrawSlider();
},100);

Answer 6

Si está cargando el elemento <ul> con ajax y contiene imágenes, intente con slider.reloadSlider(); despues de la carga Primero utilicé

setTimeout(''slider.reloadSlider()'',1000);

para esperar a que se carguen las imágenes, pero finalmente ImagesLoaded a la bonita biblioteca ImagesLoaded que esperará a que se carguen las imágenes:

imagesLoaded(''.seminars-slider'', function() {
slider.reloadSlider();
});

(Cambió los nombres de las variables para que coincidan con los de la pregunta)