1

長い間、遅延読み込みをサポートするシンプルなスライドショー/ギャラリー プラグインを探していましたが、今日Slickに出会いました。

しかし、Slick のサイトは、初心者を基本的な実装に誘導するのではなく、プラグインのすべての力を示すことに重点を置いています。そして、提供された段階的な手順に従いましたが、実際には実装できませんでした。

マークアップをできる限り単純化して、何も悪いことをしていないことを確信できるようにしました。

<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    </head>

    <body>

        <div class="slider lazy">
            <div>
                <div class="image">
                    <img data-lazy="http://i.imgur.com/Ik3yGs8.jpg"/>
                </div>
            </div>
            <div>
                <div class="image">
                    <img data-lazy="http://i.imgur.com/Bw2NgHm.jpg"/>
                </div>
            </div>
            <div>
                <div class="image">
                    <img data-lazy="http://i.imgur.com/uNPeNKN.jpg"/>
                </div>
            </div>
            <div>
                <div class="image">
                    <img data-lazy="http://i.imgur.com/ys8QsLT.jpg"/>
                </div>
            </div>
        </div>

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script type="text/javascript" src="slick/slick.min.js"></script>

        <script type="text/javascript">

            $(document).ready(function(){
                $('.lazy').slick({
                  lazyLoad: 'ondemand',
                  slidesToShow: 1,
                  slidesToScroll: 1
                });
            });

        </script>

    </body>

</html>

使用する画像のセットがないため、IMGUr でホストされているランダムなアルバムからいくつかを選びましたが、この構造は、「マニュアル」で説明されているコード フラグメントが意図したとおりには機能しません。

たとえば、ナビゲーションの矢印が表示されません。Chrome Element Inspector を使用して、成功せずに配置されている場所を確認するために、境界線を追加しました。

いくつかの情報を掘り下げた後、「マニュアル」で狙ったもの以外のコードから、ドット: trueと小さな基本的なナビゲーションが表示されました。ついに働き始めましたが、私が望んでいた方法ではありませんでした。

また、私のキーボードは何もしません。後で、accessibility: trueが有効になることがわかりました。

しかし、一般的に、実装は必要以上に困難です。非公式のマニュアルとして機能している別のサイト、または何十もの例を投げて、すべての API オプションをテストすることで誰もがどのように動作するかを理解できるようにするよりも、より良い方法で使用法を説明しているサイトはありますか?

4

3 に答える 3

1

これらのいくつかをテストした結果、代わりにフクロウのカルーセルを使用することになりました。しかし、それは私の特定のニーズのためでした (これは画像ではなく、タッチフォン用のコンテンツでした)。私は実際にそれらのどれについても幸せではありませんでした.

于 2014-05-31T14:58:38.830 に答える
0

私は滑らかなカルーセルを使用していますが、うまく機能します。彼らはすべて非常によく文書化しました。設定セクションでは、提供された設定を使用してカルーセルをカスタマイズする方法の説明を見つけることができます。

于 2016-06-24T14:00:55.843 に答える
0

私も同じことに苦労していました。結局のところ、それらを見るには色付きの背景が必要です。または、色を変更します。参考：https ://github.com/kenwheeler/slick/issues/440

于 2014-08-31T20:48:51.780 に答える