bxslider Berechnung falsche Ansichtsfenstergröße auf Last

Question

Wie auch immer, ich habe vor kurzem begonnen, mit bxslider und ich habe ein Problem damit.

Es scheint, seine Darstellungsgröße auf Seite Last falsch zu berechnen, was bedeutet, es nicht gut auf mobilen Geräten, Tablets usw.

Das Seltsame ist, funktioniert, wenn ich das Fenster des Browsers die Größe (auch nur für ein Pixel) wird die Ansichtsfensterhöhe korrekt berechnet und alles sieht gut aus. Aber wenn ich die Seite mit der gleichen Höhe und Breite auffrischen würde, würde bx-viewport nicht korrekt berechnet werden.

Eine Idee, warum das passiert?

HTML sieht wie folgt aus etwas (und ja, ich bin mir dessen bewusst, dass es wahrscheinlich nichts denn damit zu tun, aber immer noch):

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

js Aufruf wie folgt aussieht:

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

Danke.

Answer 1

Es kann sein, dass Sie die bxSlider-Funktion zu früh aufrufen. Wenn Sie es von

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

sind aufgerufen wird stattdessen prüfen, mit

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

Der Unterschied zwischen diesen beiden Funktionen besteht darin, dass (document) .ready wartet, bis die DOM hat gezeigt worden, der Benutzer im Ausgangszustand, während (window) .load tatsächlich wartet, bis alle Ressourcen in das DOM geladen wurden.

Answer 2

Wenn Sie das <ul> Element mit Ajax laden und es Bilder enthält, versuchen Sie slider.reloadSlider(); nach dem Laden. Zuerst habe ich

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

zu warten, bis die Bilder zu laden, aber schließlich wechselte ich auf die schöne Bibliothek ImagesLoaded, die für die Bilder, die auf Last warten:

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

(geändert, um die Variable-Namen mit denen der Frage übereinstimmen)

Answer 3

"romelmederos" auf der Seite bxslider github vorgeschlagen;

---

„BxSlider v4.1 -. Sie haben ein Problem mit der Wiedergabe des Schiebers, da ich für mobile Prozentsatz für die Höhe in einer ansprechenden Website bin mit

So hatte ich die Änderung machen von: slider.viewport.css ('height', getViewportHeight()); zu diesem: slider.viewport.css ('Höhe', '');

ich das Plugin mit einer Option statt in meiner Kopie verändert, aber der schnellste Weg ist oben“

---

ich online mein jquery.bxslider.js 1290 bearbeitet durch Modifizieren der Linie zu ändern; Das funktionierte großartig für mich und scheint eine bessere Lösung als window.load, (mit window.load der Schieber gesprengt wurde, bis alles geladen.)

Answer 4

Sie

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

Answer 5

Matthew W verwenden können ATSON gab mir eine gute Idee, und ich ging in das Plugin und aktualisiert die tatsächliche getViewPortHeight() Funktion wie so:

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

So, jetzt ist es die Höhe des ersten Bildes nehmen es in (hoffentlich sind sie alle gleich ...) und damit die Höhe des Schiebers bestimmen. Bitte beachten Sie, dass Ihre Steuerelemente immer noch unter dem Schieberegler sitzen, aber dies kann mit CSS-Positionierung etc. behoben werden.

Ich hoffe, dies hilft einigen verlorenen Menschen da draußen.

Answer 6

Eine Lösung für diesen Safari-Bug gefunden. Der Modus des Sliders muss horizontal sein (nicht sicher, ob auch vertikal funktioniert, aber die Überblendung überhaupt nicht funktioniert). Dann müssen Sie die Höhe des ersten Bildes ermitteln und an das ".bx-viewport" übergeben. So sieht mein Skript aus:

$("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); 
});