6

私はこのBasic jQuery Slider (bjqs) を使用しており、応答性に優れた動作をさせようとしています。彼らの変更ログには、その応答性は「ベータ版」であると書かれているので、それが一種の不安定な理由だと思います.

私が実装しているスライダーの URL は次のとおりです: http://test.hetzelcreative.com/hybrid/

これには基本的に 2 つの問題があり、どちらも小さな画面サイズ (携帯電話の幅) でページをロードすることに関係しています。

  1. 画像は比例して読み込まれず、100% 適合しません
  2. ブラウザのサイズを大きくすると、配置がめちゃくちゃになり、画像が複製されて垂直方向に積み重ねられることさえあります。ページを更新するとこれが修正されますが、もちろんそれは受け入れられません

また、bjqs-1.3.min.js幅を 854px、高さを 481px に設定しています。最初は 400x300 か何かに設定されていました。これが私の問題の原因かどうか疑問に思っています。これらの w & h 属性を削除すると、全体が機能しなくなります。

4

7 に答える 7

2

同様の問題（ブラウザウィンドウのサイズ変更について）がありますが、最終的に修正しました（またはハック、名前を付けます）：

プラグインを初期化するとき、スライダーの寸法 (例: ) を定義できます。ページの単一スライドの最大widthサイズになるため、そこに可能な最大値を設定する必要があります (残念ながら、公式ドキュメントでは説明されていません)。このように）-あなたの（デバイス）画面サイズになるはずです：

width: window.screen.width,

レスポンシブにすることを忘れないでください：

responsive: true,

スライダーの初期化後（ドキュメントの最後に配置できます）、resizeスライダーを現在のブラウザーサイズにサイズ変更するイベントをトリガーする必要があります（ウィンドウが最大化されない場合、スライダーはそれよりも大きくなり、100 では表示されないため） %):

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

最新のfirefoxとchromeで動作します-IEやその他のものではテストされていません。

PS。スライダーのページネーションの箇条書きを使用していて、それらを水平方向の中央に配置したい場合は、サイズ変更イベントをトリガーする前に次のコードを追加する必要があります。

$(window).resize(function(){
  $('yourSliderId .bjqs-markers.h-centered').css({'left':0});
});
于 2014-07-24T07:02:11.007 に答える
1

これをいくつかの異なるブラウザで試してみました。応答性に関しては、1 つまたは 2 つ以上の小さなバグがあると思います。

bjqs が抱えているすべての問題を解決しようとする代わりに、最初から応答性を考慮して設計されたものを探すことを検討しましたか?

  • SequenceJS、非常にアクティブに見え、次の大きな github があります
  • FlexSliderにも大きな github がありますが、ターゲットにしているブラウザーによっては、問題のリストが少し長く見えます。
于 2013-03-17T14:50:23.477 に答える
1

スマートフォンのような小さな画面での初期ロードを除いて、すべてが応答性よく動作するという問題がありました。画面を縮小すると、ブラウザで問題が発生する可能性があります。ただし、ウィンドウのサイズを変更すると修正されます。初期ロードでは機能しません。

私のために働く修正を見つけました。私は bjqs-1.3.js の縮小されていないバージョンを入手し、簡単に追加しました。175 行目は次のように始まります。

var conf_responsive = function() {

次に、ifその関数内に次のステートメントがあります。

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

if私のアニメーション タイプは「スライド」だったので、THAT ステートメントの中に何かを入れました。if(settings.animtype === 'fade'){フェードを使用している場合は、条件に対して同様のことを行う必要がある場合があります。

とにかく、 if 条件付きの中で、 の下で$(window).resize(function() {})、私はそれを次のように呼びました:

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

それは私が抱えていた問題を解決したようです。これがここに投稿された問題とまったく同じかどうかはわかりませんが、関連する問題の解決策を探している人に役立つかもしれません.

于 2014-04-11T15:16:45.037 に答える
0

解決策を探している人のために、ここにあります：

幅の問題を解決するには、上記の解決策を実行してください

高さの問題については、高さと幅の間に存在する軸係数を適用するだけです

例: スライダーの画像が 2 倍大きい場合は、次のように適用します。

$(function () {
    $('#banner-slide').bjqs({
        animtype: 'slide',
        width: $("#banner-slide").width(),
        height: $("#banner-slide").width() /2,
        responsive: true,
        randomstart: true
    });
});
于 2014-11-18T13:49:40.743 に答える
0

幅の問題を修正するには、初期化でコンテナ div の幅を取得します。

$(function () {
    $('#banner-slide').bjqs({
        animtype: 'slide',
        height: 445,
        width: $("#banner-slide").width(),
        responsive: true,
        randomstart: true
    });
});
于 2014-08-22T18:07:27.983 に答える
0

時間の関係で台本を深く見ていません。ただし、スクリプトが幅と高さが設定されたラッパーにあることを確認してください。次に、スクリプトの幅を 100%、高さを 100% に設定します。

于 2013-03-15T17:23:13.077 に答える
0

スライダー クラスの幅をプラグインの最大幅と一致するように設定することをお勧めします。

つまり、この場合は 100% で、854px にする必要があります。

次に、スライダー クラスに追加overflow:hidden;して、話しているスタック効果が得られないようにします。

于 2013-02-27T14:25:10.807 に答える