thumbnail - slider jquery responsive




¿Cómo hacer que bxSlider oculte las diapositivas hasta que se cargue la página? (10)

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!


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


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>

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;
    }
  }
}

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>

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!


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


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 .


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.


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'
      });
    });

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.





bxslider