Slick.js を使用して Web サイトにカルーセルを追加する

このチュートリアルでは、Slick.js を使用してカルーセルを処理し、Web サイトに追加する方法を説明します。まず、画像の単純なカルーセルを作成し、基本的なスクロール機能を提供します。次に、徐々にカルーセルにさまざまなプロパティを追加し、必要に応じてカルーセルにいくつかの変更を加えます。

ライブラリを使用せずにカルーセルを作成しようとすると、非常に時間がかかります。労力を軽減し、異なるプロパティを持つ複数のタイプのカルーセルを追加できるようにするには、slick.js を使用します。

Slick.js は非常に有名で広く使用されている jQuery プラグインで、複数のプロパティとさまざまな属性を備えたレスポンシブなカルーセルを作成できます。

スリックの機能

Slick.js は、いくつかの理由からカルーセルに最適です。これらの理由の一部を以下に示します -

• 完全に応答性の高いカルーセルを提供します。

• カルーセルはコンテナに合わせてスケールします。

• これにより、個々の設定に異なるブレークポイントを使用できるようになります。

• CSS3 を含めるかどうかはあなたの選択です。

• デスクトップのマウスドラッグをサポートします。

• 無限ループがあります。

これらは、カルーセルを作成する従来の方法と比較して、Slick が提供する人気のある機能の一部です。

Slick を使用してカルーセルを作成する

Slick について理解したところで、次は Slick を使用してカルーセルを作成する方法を学習します。カルーセルを作成する最初のステップは、HTML ファイルと CSS ファイルを用意することです。これらのファイルには、カルーセルも含まれる Web サイトのロジックを書きます。

次のコマンドを実行します -

リーリー

上記のコマンドでは、index.html と style.css という 2 つのファイルを作成しました。

注 - index.html がマシン上で実行できない可能性があります。vi コマンドを使用して両方のファイルを作成してください。

それでは、非常に基本的なカルーセルを作成するために必要な HTML コードを書いてみましょう。

index.html ＃＃＃例＃＃＃ リーリー

イラスト

さて、難しい部分は終わりました。

index.html

ファイルでの Slick の使用方法と、使用するプロパティと機能に焦点を当てましょう。

Slick を使用するときに最初に行うことは、Slick をインストールするか、コード内で利用できるようにすることです。これはさまざまな方法で行うことができます。最も簡単な方法は CDN リンクを使用することです。これは私が html

ファイルで行ったことです。

次のコード スニペットは、index.html

ファイルの head タグに 2 つの CDN が存在することを示しています。

リーリー 次に、HTML にさらに CDN を追加する必要がありますが、head、

ではなく、

body タグ内に追加します。以下に示すコード スニペットを考えてみましょう。 リーリー 上記のコード スニペットでは、jQuery の依存関係と、js

機能を追加する

slick.min.js をインポートしました。 ここからが楽しい部分です。Slick を使用する必要があります。このために、指定された高さと幅を持つさまざまな画像を含む複数の div

を持つ

carousel というクラスを作成したことがわかります。 。 b>carousel

という名前のクラスは、body タグ内の script タグ内で使用されます。ここで jQuery 関数を作成し、「$」演算子と

slick を使用して、プロパティを設定する 1 つのメソッド slidesToShow: 2, は、一度に 2 枚のスライドのみを表示することを Slick に指示します。 ここで、ブラウザで index.html

ファイルを実行すると、特定の瞬間に表示される 2 つの画像を含むさまざまな画像のカルーセルが表示され、矢印ボタンを押すこともできます。画像の左右中央にある は、次の画像セットを表示します。

カルーセルに興味深い属性を追加する

このようにして、基本的なカルーセルが完成しました。次に、興味深いプロパティを追加してカルーセルの動作を変更する方法について説明します。これは、

".slick({})"

メソッドに set プロパティを追加することで実行できます。

カルーセルのユーザーに、クリックして特定の画像に移動できるドット オプションを持たせたいとします。これは、dots

属性を追加することで実行できます。以下に示すコード スニペットを参照してください。

リーリー 前の ".ready()"

メソッドを上記のコード スニペットに置き換えると、ブラウザーのカルーセルの下に異なる数のドットが表示されることがわかります。

次のように dotsClass 属性を追加することで、ドットのタイプまたはカテゴリを変更することもできます。 リーリー

利用可能な dotClasses が複数あり、最も人気のあるのは -

です。

スムーズスポット

• スムーズなカルーセル

• スムーズでアクティブな

• Web サイト上のさまざまなカルーセルで見られるカルーセルの最も重要な機能の 1 つは、ボタンをクリックしてページに移動しなくても、カルーセルが自動的に実行されるのを確認できる

  自動再生
機能です。次の画像または

div,

これは、autoPlay プロパティを使用して、Slick.js で簡単に実行できます。以下に示すコード スニペットを参照してください。

$(document).ready(function () { 
   $('.carousel').slick({ 
      slidesToShow: 2, 
      dots: true, 
      dotsClass: 'slick-dots', 
      autoplay: true, 
      autoplaySpeed: 1000, 
   }); 
});

在上面的代码片段中，我们添加了具有不同属性的 Slick，其中之一是 autoplay 属性以及 autoplaySpeed，它告诉我们在什么情况下显示下一个图像或 div 的时间，在我们的例子中，为 1000 毫秒。

如果运行 HTML 代码，您将看到轮播将处于自动播放模式，图像每 1000 毫秒或 1 秒更改一次。

结论

在本教程中，我们演示了如何使用 Slick.js 创建您选择的轮播并将其添加到您的网站上。

以上がSlick.js を使用して Web サイトにカルーセルを追加するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。