jquery - slidewidth - ¿Cómo hacer que bxSlider oculte las diapositivas hasta que se cargue la página?

bxslider thumbnail

Question

Estoy construyendo un sitio web que usa bxSlider .

A medida que la página se carga, todas las diapositivas son visibles, apiladas una encima de la otra. Una vez que la página está completamente cargada, la primera diapositiva permanece visible y el resto desaparece para que la barra deslizadora pueda animar y mostrarlas de a una por vez.

He intentado usar varias devoluciones de llamada CSS y bxSlider para ocultar las diapositivas hasta que la página se cargue completamente, pero no hubo suerte. ¿Alguien sabe como hacer esto?

¡Gracias!

Answer 1

Agregué un título y texto div a mi control deslizante, así que cuando estaban cargando todo se apiló en la parte superior de la página, así que con la ayuda de esta publicación pude ocultar los elementos de la diapositiva pero mostrar un elemento de carga:

Como otros más arriba han dicho una visibilidad: la clase oculta se agregó al div externo, pero también agregué una visibilidad: clase visible fuera de eso para mostrar un ajax_loader, luego con el código a continuación, establecí el primero para ocultar cuando las diapositivas se cargaron y fueron configurados como visibles. Ahora, en lugar de tener un espacio en blanco feo mientras se cargan las diapositivas, puedes ver un cargador, por lo que tiene más sentido para el usuario:

jQuery(document).ready(function($) {
$(''.bxslider'').bxSlider({
onSliderLoad: function(){
$(".slideouter").css("visibility", "visible");
$(".slideloader").css("visibility", "hidden");
},
autoControls: true,
auto: true,
mode: ''fade''
});

Espero que esto ayude, así que el deslizador es el div que está oculto en su CSS y el deslizador está visible en su CSS, pero ambos se intercambian una vez que se ha cargado el control deslizante. Espero eso ayude.

Saludos, Lee

Answer 2

Coloque un div que envuelva todo el contenido y coloque un style="display:none" en él. Luego, después de llamar a bxslider, solo demuéstralo.

EX:

<script type="text/javascript">
$(document).ready(function(){
$(''.bxlider'').bxSlider({
displaySlideQty : 5,
prevText : "",
nextText : "",
moveSlideQty : 5,
infiniteLoop : false
});
$(".bxsliderWrapper").show("fade");
});
</script>

Answer 3

He usado este CSS y funcionó para pantallas de más de 1.200 de ancho porque mi control deslizante es ese ancho en tamaño máximo, la versión de la tableta aún no está arreglada, también puedes probar una cantidad de% en lugar de píxeles de esta manera.

.banner es mi div principal para mi control deslizante bxslider.

.banner{overflow: hidden !important; height: 426px;}
@media screen and (max-width: 1200px){.banner{height: auto;}}

<div class="banner">
<div class="bx-wrapper">
</div>
</div>

Answer 4

Lo que terminé haciendo fue agregar algo de CSS para ocultar todo menos la primera diapositiva.

¡No se requieren marcas adicionales ni comportamientos que funcionen en todos los principales navegadores!

.bxslider {
li {
display: none;
&:first-child {
display: block;
}
}
}

Answer 5

Ninguna de las soluciones publicadas funcionó para mí.

Usar la visibilidad: oculto solo resultó en un gran espacio en blanco en la página.

Por algún motivo, al usar la pantalla: ninguno resultó en la carga de ninguna de las diapositivas, solo los controles.

Esta es la única forma en que podría obtener algún tipo de solución razonable:

En el CSS:

.ctaFtSlider
{
visibility: hidden;
height: 0;
}

En la función:

$(document).ready(function(){
$(''.bxslider'').bxSlider({
...
onSliderLoad: function(currentIndex){
$(".ctaFtSlider").css("visibility", "visible");
$(".ctaFtSlider").css("height", "auto");
}
});
});

Finalmente, el HTML:

<div class="ctaFtSlider">
...
</div>

Answer 6

No es una respuesta per se, pero ¿alguien ha notado que con este error, toda la opacidad de los elementos de la lista se establece en 1? Creo que el setChildrenFade inicial no se invoca en la inicialización de la presentación de diapositivas.

Actualizado:

Logré ordenarlo agregando:

/**
* Start the slideshow
*/
this.startShow = function (changeText) {
if (options.mode == ''fade'') {
setChildrenFade();
}

Para comenzar, muestre la función.

Parece que setChildrenFade no se llama por diseño hasta que se llame a GoToSlide. Es posible que esto sea un error, ya que solo notará el problema si el fondo del elemento de la lista se establece en transparente ... de lo contrario, el índice z: maneja la ocultación en el inicio inicial.

Espero que esto ayude.

Answer 7

No recuerdo dónde encontré esto, pero creo que es la forma más limpia de lograr que todas las diapositivas se vean en la carga de la página.

Primero agregue un div alrededor de la lista desordenada de bxslider:

<div class="bxslider-wrap">
<ul class="bxslider">
<li>Image / Content </li>
<li>Image / Content </li>
<li>Image / Content </li>
</ul>
</div>

A continuación, agregue esta línea a su archivo CSS, que oculta todo el control deslizante cuando se carga la página:

.bxslider-wrap { visibility: hidden; }

Por último, configure el control deslizante en visibilidad: visible a través de jQuery (en su archivo js) cuando el control deslizante se carga para hacer que el control deslizante sea visible nuevamente.

jQuery(document).ready(function($) {
$(''.bxslider'').bxSlider({
onSliderLoad: function(){
$(".bxslider-wrap").css("visibility", "visible");
}
});
});

¡Espero que esto ayude!

Answer 8

No sé exactamente sobre el método style = "display: none", pero cuando "hide () / fadeOut ()" con el contenedor jQuery bxSlider y luego init bxSlider, se representará con errores en el marcado. (posiblemente usando la pantalla: ninguno evitaría el error, pero si quieres desvanecer tu control deslizante, mi método sería aplicable)

simplemente coloque su contenedor como ''absoluto'' en css y en su JS antes de la inicialización de bxSlider muévalo a la parte invisible de la página, inícielo, y luego escóndalo, vuelva al punto anterior y finalmente fadeIn:

$("#bxslider-container").css({''left'' : "4000px"});
$(''.bxslider'').bxSlider();
$("#content-wrapper").hide().css({''left'' : "0px"}).fadeIn(2000);

espero que ayude

Answer 9

Probé la mayoría de las soluciones a esto y descubrí que no estaban lo suficientemente pulidas para lo que estaba buscando. Todavía estaba recibiendo una presentación desigual una vez que el control deslizante se cargó con solo apareciendo. El uso de .fade () estaba cerca, pero se anima desde la parte superior izquierda a la parte inferior derecha, lo que parecía extraño. Conectarse a onLiderLoad funciona muy bien, pero cambiar la visibilidad aún hace que el control deslizante solo aparezca en la pantalla. Estaba buscando un poco más de una entrada elegante, así que en el gancho, agregué una clase en lugar de cambiar el CSS.

jQuery:

$(''.slider'').bxSlider({
auto: false,
pager: false,
mode: ''fade'',
onSliderLoad: function(){
$(".slide-clip").addClass(''-visible'');
}
});

HABLAR CON DESCARO A:

.slide-clip {
opacity:0;
max-width: 1305px; // Used as a clipping mask
max-height: 360px; // Used as a clipping mask
overflow:hidden; // Used as a clipping mask
margin:0 auto;
transition(all 275ms);
&.-visible {
transition(all 275ms);
opacity:1;
}

}

Estoy usando un contenedor para enmascarar mi control deslizante ya que lo necesito en mi caso, por lo que para los interesados:

<div class="slide-clip">
<ul class="slider">
<li style="background-image: url(''URL_HERE'');"></li>
</ul>
</div>

Answer 10

Supongamos que tiene:

HTML:

<ul class="slider">
<li>...</li>
<li>...</li>
</ul>

y jQuery:

jQuery(''.slider'').bxSlider({
...
});

Entonces la siguiente solución haría el truco al ocultar todas las diapositivas, pero la primera.

CSS:

ul.slider li:nth-child(n+2) {
display: none;
}

Cuando el control deslizante esté completamente cargado, cada diapositiva activa obtendrá automáticamente la display: block estilo display: block .

Answer 11

Tenía este mismo problema. <div class="bxsliderWrapper"> el marcado a continuación e inicialmente escondí el <div class="bxsliderWrapper"> CSS display: none; Noté que el ancho de las diapositivas <div class="slide"> se representaba en 1px.

Sospecho que tiene algo que ver con el contenido interactivo que toma las dimensiones del contenedor inicial, que estaba oculto, y la definición de estilos en línea para cada diapositiva para que coincida.

<div class="bxsliderWrapper">
<div class="bxslider">
<div class="slide">Your Content</div>
<div class="slide">Your Content</div>
<div class="slide">Your Content</div>
</div>
</div>

Mi solución es similar a la de bradrice mencionada anteriormente sobre el uso de las funciones integradas de devolución de llamada. Acabo de agregar la función reloadSlider() a la función show() lugar.

<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function(){
var homeSlider = $j(''.bxslider'').bxSlider();
$j(".bxsliderWrapper").show(0, "swing", function(){homeSlider.reloadSlider();});
});
</script>

Activa la recarga una vez que se complete show ().

.

EDITADO

La solución original anterior funcionó al principio, pero tuve problemas cuando la memoria caché se borró durante un shift + REFRESH actualización fuerte shift + REFRESH . Supongo que los elementos a los que se dirige la función .show() no estaban disponibles a tiempo o los recursos aún no se cargaron. (Supongo) A continuación hay una solución para este comportamiento.

En lugar de ocultar el control deslizante Bx que contiene <div> con display: none; , Oculté las imágenes de diapositivas usando el atributo CSS de visibility .

.bxslider .slide {
visibility: hidden;
}

Esto permite que el control deslizante se reproduzca con el tamaño correcto sin ver las imágenes en la pantalla hasta que estén listas. Luego utilicé el método jQuery .css() desencadenado por $j(window).load() para cambiar la visibilidad después de que la página se haya cargado. Esto aseguró que todos los códigos y elementos existieran antes de mostrarlos.

<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function(){
var homeSlider = $j(''.bxslider'').bxSlider();
});
$j(window).load(function(){
$j(".bxslider .slide").css("visibility", "visible");
});
</script>

Este método también funcionó con múltiples controles deslizantes en la misma página. Encontré que el método .show() hacía que todas las instancias del control deslizante se rompieran. Solo estoy adivinando por qué esta es una solución mejor, pero tal vez alguien pueda agregar algo de información para entender esto mejor.

Answer 12

Tuve el mismo problema y este truco me ayudó:

 <ul id="bxSlider" style="padding:0px !important;overflow:hidden;height:385px;">

poner valores de altura y desbordamiento en el elemento ul del control deslizante.

Atentamente

Answer 13

Tuve el mismo problema y lo solucioné de esta manera:

<div class="mySlider" style="display:none">

entonces

$(document).ready(function(){
$(''.mySlider'').show().bxSlider({
slideWidth: 160,
minSlides: 2,
maxSlides: 5,
preloadImages: ''all''
});
});

Answer 14

Una solución rápida y sencilla de solo CSS para navegadores modernos (IE10 +) es:

.bxslider {
transform: scale(0);
}

Esto funciona porque inicialmente el control deslizante se reducirá a nada, pero cuando bxSlider cargue, anulará la transformación con un estilo en línea.

Answer 15

bxslider tiene una devolución de llamada cuando se carga el control deslizante (enSliderLoad). Establezco la visibilidad como oculta en un contenedor div y luego uso la devolución de llamada para establecer la visibilidad en "visible".

<div id="siteslides" style="visibility: hidden;"></div>
$(".site_banner_slider").bxSlider({
auto: true,
slideWidth: $imageWidth,
mode: ''fade'',
onSliderLoad: function(){
$("#siteslides").css("visibility", "visible");
}
});