Basic jQuery Slider (bjqs) Reaktionsfähigkeit Fragen

Arbeite ich mit diesem Basic jQuery Slider (bjqs) und versucht, es zu erhalten, um effizient zu arbeiten. Ihre changelog sagt, dass die Reaktionsfähigkeit der it ist in der "beta", also ich vermute, dass ist der Grund, warum es ist irgendwie kaputt.

Hier ist die url zu dem regler, ich bin Implementierung: http://test.hetzelcreative.com/hybrid/

Gibt es im Grunde zwei Probleme mit, es & Sie haben beide zu tun mit dem laden der Seite auf kleinen Bildschirmen (Handy-Breite):

  1. Die Bilder nicht geladen werden anteilig und nicht passend 100%
  2. Wenn Sie die Größe des browser, die Positionierung bekommt alles Durcheinander und es beginnt auch duplizieren Sie die Bilder, und stapeln Sie vertikal. Eine Aktualisierung der Seite behebt das, aber das ist natürlich nicht akzeptabel

Auch in bjqs-1.3.min.js ich habe die Breite festgelegt 854px Höhe und zu 481px. Es war ursprünglich auf 400x300 oder so etwas. Ich Frage mich, ob dies die Ursache meines Problems. Wenn ich entfernen Sie diese w & h-Parametern, obwohl die ganze Sache nicht funktioniert.

  • scheint okay zu sein auf neueste version von Chrome (v25), Win 7
  • Ändern Sie die Größe Ihrer browser ganz nach unten, führen Sie dann eine Aktualisierung. Sie sollten sehen, der Anteil der Problem, und dann, wenn Sie die Größe ändern, Sie werden sehen, beginnen die Dinge noch mehr Durcheinander.
  • Ich Tat, wie Sie vorgeschlagen, aber ich bin immer noch nicht zu sehen, das Problem, Sie sind immer in Chrom. Meist beta ist, weil es funktioniert cross-browser-ist immer ein Thema, und nimmt sich Zeit für die bugs.
InformationsquelleAutor Trevan Hetzel | 2013-02-27
  1. 2

    Ich habe ähnliches problem (über die Größenänderung up-browser-Fenster) - aber schließlich habe ich es behoben (oder hack, you name it):

    Beim initialisieren des plugin können Sie festlegen, Abmessungen (z.B. width) von der regler - und Sie sollten dort die grösste mögliche Wert, denn es wird das maximale Größe der einzelnen Folie auf Ihrer Seite (schade, dass die offizielle Dokumentation beschreibt nicht, es auf diese Weise) - so sollte es sein (Gerät) screen-Größe:

    width: window.screen.width,

    und vergessen Sie nicht, um es responsive:

    responsive: true,

    und nach der Initialisierung des Reglers (es kann sein, platziert am Ende des Dokuments) sollten Sie trigger resize Ereignis, um die Größe Ihrer Schieberegler, um die aktuelle browser-Größe (wenn das Fenster nicht maximiert Schieberegler größer sein wird als es und nicht sichtbar in der 100%):

    $(window).trigger('resize');

    Funktioniert es für mich am neuesten firefox & Chrom - nicht getestet auf IE & andere Sachen.

    PS. Im Fall, wenn Sie mithilfe der Schieberegler die Paginierung Kugeln und Sie wollen, um Sie horizontal zentriert Sie sollten fügen Sie diesen code vor Auslösung der resize-Ereignis:

    $(window).resize(function(){
  $('yourSliderId .bjqs-markers.h-centered').css({'left':0});
});
    InformationsquelleAutor lukaszkups
  2. 1

    Gab ich diesem einen Versuch in ein paar verschiedenen Browsern. Ich würde sagen, es hat mehr als ein oder zwei kleine Fehler, wenn es um die Reaktionsfähigkeit.

    Anstatt zu versuchen, zu beheben alle Probleme bjqs hat, haben Sie als auf der Suche für eine, die entworfen wurde, für die Reaktionsfähigkeit von der start statt?

    • SequenceJS, sieht sehr aktiv und hat eine große github folgenden
    • FlexSlider, hat auch eine große github folgt, sondern die Themen-Liste sieht ein wenig lang, je nachdem, welche Browser Sie auf/etc
    InformationsquelleAutor ryan
  3. 1

    Hatte ich das Problem, wo ich alles bekam, was Sie arbeiten effizient, mit Ausnahme der ersten Ladung auf einem kleineren Bildschirm, wie ein smart-phone. Man konnte sehen das problem in meinem browser, wenn ich die verkleinert den Bildschirm nach unten. Es wäre behoben, wenn ich die verkleinerten Fenster obwohl. Es wäre einfach nicht auf das Initiale laden.

    Fand ich eine Lösung, die für mich gearbeitet. Ich packte die un-minified-version des bjqs-1.3.js und machte eine schnelle Ergänzung. Linie 175 begann wie diese:

    var conf_responsive = function() {

    Dann gibt es eine if - Anweisung innerhalb der Funktion, die sagen:

    if(settings.animtype === 'slide'){

    Ich etwas im inneren, DASS if Aussage, weil meine animation wurde der Typ 'schieben.' Sie können tun, etwas ähnliches für die if(settings.animtype === 'fade'){ bedingte wenn Sie verblassen.

    Aber trotzdem, im inneren, dass, wenn bedingte, unter der $(window).resize(function() {}) ich nannte es gerne so:

    $(document).ready(
function() {
$(window).trigger('resize'); 
 }
);

    Zu haben scheint wurde das Problem behoben, die ich hatte. Nicht sicher, dies ist das exakt gleiche problem, das hier gepostet wurde, aber es könnte helfen, jemand auf der Suche nach einer Lösung für ein ähnliches problem.

    InformationsquelleAutor Steve C.
  4. 0

    Ich würde vorschlagen, Einstellung der Breite des slider-Klasse zu entsprechen, die von der max-Breite des plugins.

    d.h. in diesem Fall haben Sie es bei 100% ist, sollte es 854px.

    Dann fügen Sie overflow:hidden; auf die slider-Klasse, so dass Sie nicht bekommen, die stack-Effekt, den Sie sprechen.

    • Aber sehen möchte ich den vorherigen und nächsten Bilder werden sichtbar. Hinzufügen von overflow:hidden lässt den vorherigen und nächsten Bilder nicht sichtbar.
    InformationsquelleAutor tcmorris
  5. 0

    Habe ich noch nicht sah in der Tiefe, in der das script aufgrund von zeitlichen Beschränkungen. Jedoch, was ich tun würde, stellen Sie sicher, dass das Skript in einen wrapper mit einem set Breite & height. Legen Sie dann das Skript auf 100% Breite und die Höhe auf 100%.

    • Problem ist, die Breite 100% des Körpers, so dass nicht funktioniert
    InformationsquelleAutor Xarcell
  6. 0

    Zu beheben die Breite problem Sie können die div-container, Breite in der Initialisierung:

    $(function () {
    $('#banner-slide').bjqs({
        animtype: 'slide',
        height: 445,
        width: $("#banner-slide").width(),
        responsive: true,
        randomstart: true
    });
});
    InformationsquelleAutor Eyal
  7. 0

    Für diejenigen, die sich für die Lösung, hier ist es :

    nehmen Sie die Lösung von oben zu beheben die Breite problem

    für die Höhe ein problem werden, gelten Sie nur ein x-Faktor, das zwischen der Höhe und der Breite

    Beispiel : wenn Ihr Schieberegler Bilder sind zweimal größer als mehr, dann diese :

    $(function () {
    $('#banner-slide').bjqs({
        animtype: 'slide',
        width: $("#banner-slide").width(),
        height: $("#banner-slide").width() /2,
        responsive: true,
        randomstart: true
    });
});
    InformationsquelleAutor theslider58
Schreibe einen Kommentar