0

1週間以上前からこの問題があり、気が狂っています。私は「コード」のような男ではなく、ここまでやってきたという事実にもかかわらず、私は本当に限界に達しています。誰かが私の問題を解決するのを手伝ってくれることを願っています。

だから、ここに私の問題があります: 私は 3 つのプラグインを使用しています: Flexslider、Inviewevent ( https://remysharp.com/2009/01/26/element-in-view-event-plugin ) および Scrollify。私のウェブサイトはセクションに分かれており、すべてのセクションがフルスクリーンです。scrollify プラグインとそのウェイポイント システムのおかげで、ユーザーがスクロールするかキーボードを使用するたびに、ウェブサイトはスライド アニメーションで次のウェイポイントに自動的にスクロールします。すべてのセクションがフルスクリーンなので、スクロールバーを無効にしました。ユーザーが垂直方向と水平方向にスクロールできるようにしようとしているため、Flexslider を使用しています。アイデアを提供するために、私はこのウェブサイトに非常に触発され、基本的に同じことを達成しようとしています: http://www.kunstler.it/ .

現在、Flexslider プラグインには「キーボード」というオプションがあります。ブール値です。「true」の場合、ユーザーはキーボードの矢印を使用してスライドからスライドに移動できます。私の問題は、表示されていなくても (Web サイトの別のセクションにいるとき)、スライダーがまだキーボード入力を登録していて、気になることです。スライダーが表示されていないときにユーザーがスライダーを操作できるようにしたくありません。したがって、プラグイン Inviewevent を使用して条件を作成しています。スライダーが表示されている場合はキーボードが機能し、そうでない場合は機能しません。モバイルのタッチスワイプ機能についても同様に行いますが、プラグインでもオプションが提供されているため、基本的に同じはずなので、今のところキーボードに焦点を当てています。

これが私のJqueryです：

$(window).load(function(){
    var loopCount = 0; 
    var $keyboard;

    $('.flexslider').bind('inview', function (event, visible) { // Plugin "Inviewevent". Allows me to detect if an element is inview or not
        if (visible == true) {
            $keyboard = true;
            console.log($keyboard); // Is true
        }
        else {
            $keyboard = false;
            console.log($keyboard); // Is false
        }
    });
    $('.flexslider').flexslider({ // Plugin Flexslider. Contains the options and Callback that I use
        slideshow: false,
        animation: "slide",
        controlNav: false,
        directionNav: false,
        animationLoop: false,        
        keyboard: $keyboard, // This is the option that I'm interested in. I tried to use the variable $keyboard to define it, but (to my very little knowledge) it would seem that it only works once when the function is initialised. It doesn't change dynamically which is what I'm trying to do.
        end : function(slider){  // This callback fires when the user reaches the last slide
            currentLoopCount = loopCount;
            loopCount = currentLoopCount + 1;
        },
        after : function(slider){
            if (loopCount > 0 && slider.currentSlide === 0){ 
                $.scrollify.next(); // Plugin Scrollify. When the user go back to the first slide, the wbesite automatically scroll to the next section. I suck at code and I find it very neat :D
            }
        },
    });
$('.button').click(function(){
        alert($keyboard);
}); // This is not really important. I just used it to confirm the fact that the $keyboard variable do what I want it to do. When my slider is in view, it is true, and when it's not, it's false. No problem here.

});

それだけです。全く違う方法かもしれませんし、とにかくここまで来れたのはもう奇跡です。私が行ったことのいくつかは、人間工学的または推奨されていないことは確かです。そのため、気が向いたら、ためらわずに修正してください。また、明確さの欠如、語彙/スペルミス、および最終的な奇妙な文についてもお詫びしたいと思います。英語は私の母国語ではありません。また、私はコーディングが苦手であることを覚えておいてください。HTML と CSS は簡単なことですが、javascript の理論は理解していますが、JavaScript は私の友達ではありません。最後に、使用するすべてのプラグインへのリンクを追加したかったのですが、まだ十分な評判がないため、2 つ以上のリンクを投稿できません。Inviewevent は、見つけるのが最も難しいという理由だけで残しました。残りは Google から簡単にアクセスできます。誠に申し訳ございません。

それだけです...何か質問があれば、または私に何か正確に言う必要がある場合は、明らかに対応できます。あなたの英語について心配する必要はありません。そして最後に ; 技術的なことをすることにした場合は、私に説明してみてください。単にコピー/貼り付けするのではなく、自分自身を学び、改善したいからです。前もってありがとう、心から、唖然とした男:)

4

2 に答える 2

0

探している機能が組み込まれていない場合は、プラグインを変更する必要があります。この「キーボード」プロパティは初期化時にのみ使用されるというあなたの評価は正しいです。これは jQuery プラグインの一般的なパターンです。

于 2016-04-04T12:12:38.393 に答える