Slick.js を使用して Web サイトにカルーセルを追加する-jsチュートリアル-php.cn

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

リリース： 2023-09-04 20:37:02

転載

1300 人が閲覧しました

使用 Slick.js 将轮播添加到您的网站

このチュートリアルでは、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 サイトの他の関連記事を参照してください。