Jak uzyskać bxSlider, aby ukryć slajdy do załadowania strony?

Question

Buduję stronę internetową, która używa bxSlider.

Podczas ładowania strony wszystkie slajdy są widoczne i ułożone jedna na drugiej. Po pełnym załadowaniu strony pierwszy slajd pozostaje widoczny, a reszta znika, dzięki czemu suwak może animować i wyświetlać je po jednym na raz.

Próbowałem używać różnych wywołań zwrotnych CSS i bxSlider, aby ukryć slajdy do momentu pełnego załadowania strony, ale bez powodzenia. Czy ktoś wie, jak to zrobić?

Dzięki!

Answer 1

miałem ten sam problem i ten trik pomógł mi:

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

wysokość put i przepełnienia wartości na ul element suwaka.

Pozdrawiam

Answer 2

Umieść div który jest owinąć całą zawartość i umieścić style="display:none" na nim. Następnie po wywołaniu bxslider, po prostu go pokaż.

EX:

<script type="text/javascript"> 
$(document).ready(function(){ 

    $('.bxlider').bxSlider({ 
     displaySlideQty : 5, 
     prevText : "", 
     nextText : "", 
     moveSlideQty : 5, 
     infiniteLoop : false 
    }); 
    $(".bxsliderWrapper").show("fade"); 
}); 
</script> 

Answer 3

Nie odpowiedzią per se, ale czy ktoś zauważył, że z tego błędu, wszystkie opactity (-e) elementów listy są ustawione na 1? Wierzę, że początkowy setChildrenFade nie jest wywoływany w ramach inicjalizacji pokazu slajdów.

Aktualizacja:

udało mi się rozwiązać to przez dodanie:

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

do funkcji rozpocząć pokaz.

Wygląda na to, że setChildrenFade nie jest wywoływany przez projekt aż do wywołania GoToSlide. Być może jest to błąd, ponieważ naprawdę zauważysz problem tylko wtedy, gdy tło elementu listy jest ustawione na przezroczyste ... w przeciwnym razie indeks z: obsługuje ukrywanie przy pierwszym uruchomieniu.

Mam nadzieję, że to pomoże.

Answer 4

miałem ten sam problem i mam wokół niego w ten sposób:

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

następnie

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

Answer 5

ja nie wiem dokładnie style = "display: none" metoda, ale kiedy " hide()/fadeOut() "z kontenerem jQuery bxSlider i po tym init bxSlider, będzie renderowany z błędami w znacznikach.(Ewentualnie przy użyciu display: none by uniknąć błędu, ale jeśli chcesz zanikać Yours suwak, moja metoda byłaby appliable)

prostu umieścić swój pojemnik jako „absolutny” w css i swoimi JS przed inicjalizacji bxSlider przenieść go do niewidocznej części strony, init go, a następnie ukryć je, przywrócić go do dawnej punkcie i wreszcie fadeIn:

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

nadzieję, że to pomoże

Answer 6

Co skończyło się robi dodano trochę CSS, aby ukryć wszystkie oprócz pierwszego slajdu.

Żadne dodatkowe oznaczenia lub zachowania nie są wymagane i działają we wszystkich głównych przeglądarkach!

.bxslider { 
    li { 
    display: none; 

    &:first-child { 
     display: block; 
    } 
    } 
} 

Answer 7

bxslider ma oddzwanianie, gdy suwak jest załadowany (onSliderLoad) .I ustawić widoczność do ukryty na div kontenera, a następnie użyć wywołania zwrotnego aby ustawić widoczność „widzialne”.

<div id="siteslides" style="visibility: hidden;"></div> 

$(".site_banner_slider").bxSlider({ 
    auto: true, 
    slideWidth: $imageWidth, 
    mode: 'fade', 
    onSliderLoad: function(){ 
     $("#siteslides").css("visibility", "visible"); 
     } 
    }); 

Answer 8

Miałem ten sam problem. Użyłem poniższego znacznika i początkowo ukryłem zawierający <div class="bxsliderWrapper"> z CSS display: none; Zauważyłem, że szerokość slajdów <div class="slide"> została wyrenderowana przy 1px.

Podejrzewam, że ma to coś wspólnego z funkcją reagowania, biorąc wymiary początkowego kontenera, który był ukryty, i definiując style wbudowane dla każdego dopasowanego slajdu.

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

Moje rozwiązanie jest podobne do tego, co bradrice wspomniano o użyciu wbudowanej funkcji wywołania zwrotnego. Właśnie dodałem funkcję reloadSlider() do funkcji show().

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

Uruchamia ponowne ładowanie, gdy program show() zostanie zakończony.

.

EDITED

---

Oryginalny rozwiązanie powyżej pracował początkowo ale miałem problemy gdy bufor zdaje się podczas ciężkiej odświeżania shift + REFRESH. Zakładam, że elementy kierowane przez funkcję .show() nie były dostępne w czasie lub zasoby nie zostały jeszcze załadowane. (Zgaduję) Poniżej znajduje się poprawka dla tego zachowania.

---

Zamiast ukrywać suwak Bx zawierający <div> z display: none;, ukryłem obrazy slajdów za pomocą atrybutu visibility CSS.

.bxslider .slide { 
    visibility: hidden; 
} 

Pozwala suwak do renderowania w odpowiednim rozmiarze, nie widząc obrazy na ekranie, aż będą gotowe. Następnie użyłem metody jQuery .css() wyzwalanej przez $j(window).load(), aby zmienić widoczność po wczytaniu strony. Zapewniło to, że cały kod i elementy istniały przed ich wyświetleniem.

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

Ta metoda działa również z wielu suwaków na tej samej stronie. Zauważyłem, że metoda .show() spowodowała pęknięcie wszystkich wystąpień suwaka. Zgaduję tylko, dlaczego jest to lepsze rozwiązanie, ale może ktoś może dodać trochę informacji, aby to lepiej zrozumieć.

Answer 9

Żadne z zamieszczonych rozwiązań nie sprawdziło się u mnie.

Korzystanie z widoczności: ukryty spowodowało ogromne puste miejsce na stronie.

Z jakiegoś powodu przy użyciu wyświetlacza: żaden nie powodował ładowania żadnego z slajdów, tylko elementy sterujące.

Jest to jedyny sposób mogę dostać jakieś rozsądne rozwiązanie:

W CSS:

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

W funkcji:

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

Wreszcie HTML:

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

Answer 10

I ca nie pamiętam, gdzie to znalazłem, ale uważam, że jest to najczystszy sposób na wykonanie tego problemu ze wszystkimi slajdami widocznymi podczas ładowania strony.

Pierwszy dodać div wokół bxslider nieuporządkowanej listy:

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

Następnie dodaj tę linię do pliku css, która ukrywa całą suwaka podczas wczytywania strony:

.bxslider-wrap { visibility: hidden; } 

Wreszcie zestaw suwak do widoczności: widoczny przez jQuery (w twoim pliku js), gdy suwak ładuje się, aby suwak znów był widoczny!

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

Mam nadzieję, że to pomoże!

Answer 11

Dodałem tytuł i tekst div do mojego suwaka, więc podczas ich ładowania wszystko zostało ułożone na górze strony, więc przy pomocy tego postu udało mi się ukryć elementy slajdu, ale pokazałem element ładujący :

Tak jak inni powyżej powiedział widoczność: ukryta klasa została dodana do zewnętrznego div, ale dodałem również widoczność: widoczna klasa poza tym, aby pokazać ajax_loader, a następnie z kodem poniżej, ustawić jako pierwszą ukryć kiedy slajdy załadowano i ustawiono na widoczność. Teraz zamiast brzydkiego spację podczas slajdy załadowany, można zobaczyć ładowarkę, więc ma większy sens dla użytkownika:

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

Mam nadzieję, że to pomaga, więc slideouter jest div, który jest ukryty w Twoje css i slideloader są widoczne w twoich css, ale oba zostają zamienione po załadowaniu suwaka. Mam nadzieję, że to pomoże.

Pozdrawiam, Lee

Answer 12

Załóżmy, że masz:

HTML:

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

i jQuery:

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

Wtedy następujące rozwiązanie byłoby rade ukrywając wszystkie slajdy ale pierwszy.

CSS:

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

Gdy suwak jest w pełni załadowany każdy aktywny slajdów zostanie automatycznie uzyskać styl display: block.

Answer 13

Użyłem tego css i zadziałało dla ekranów o szerokości powyżej 1200, ponieważ mój suwak ma tę szerokość na maksymalnym rozmiarze, wersja tabletu nie jest jeszcze naprawiona, możesz też wypróbować ilość% zamiast pikseli w ten sposób .

.banner jest moim głównym div dla mojego suwaka bxslider.

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

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

Answer 14

próbowałem większość rozwiązań to i okazało się, że nie były one wystarczająco polerowane za to co się dzieje na. Wciąż dostaję ostrą prezentację, gdy tylko suwak załadował ją właśnie pojawiającą się. Używanie .fade() było blisko, ale animuje się od lewego górnego do prawego dolnego, co wyglądało dziwnie. Podłączenie do serwisu onSliderLoad działa świetnie, ale zmiana widoczności nadal sprawia, że ​​suwak po prostu pojawia się na ekranie. Szukałem nieco bardziej eleganckiego wejścia, więc na haku dodałem klasę zamiast zmieniać CSS.

jQuery:

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

SASS:

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

}

Używam opakowanie zamaskować mój suwak jak mam potrzebę to w moim przypadku, tak dla osoby zainteresowane:

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

Answer 15

Szybki i łatwy CSS-jedynym rozwiązaniem dla nowoczesnych przeglądarek (IE10 +) wynosi:

.bxslider { 
    transform: scale(0); 
} 

To działa, ponieważ początkowo suwak zostanie zmniejszony do zera, ale wtedy, gdy bxSlider ładunki zastąpi on transformacji ze stylu wbudowanego.