vue.jsでカルーセル画像を記述する方法

カルーセル チャートを作成するための Vue.js メソッド: 最初に全体的なフレームワークを作成し、次にカルーセル チャートの配列を定義してローカル画像をアップロードし、最後にカスタム変数 nowindex を変更してカルーセル チャートのステータスを変更します。

このチュートリアルの動作環境: Windows10 システム、vue2.9、この記事はすべてのブランドのコンピューターに適用されます。

[関連記事の推奨:vue.js]

#vue.js でカルーセル画像を記述する方法:

シンプルなアイデアについて話しましょう。元の Js スライドの代わりに画像カルーセルにv-ifまたはv-showを使用し、トランジションにトランジションを使用します。スライド処理中は 2 つの画像が表示されるため、トランジションを 2 つ使用する必要があることに注意してください。

(1) まず全体的なフレームワークを記述します

imgArray 写真の配列に基づいて小さなドットの数をレンダリングし、スパンにバインドして小さなドットを点灯させます。写真のディスプレイおよび非表示はカスタム変数 ifshow を通じて表示され、nowindex はカルーセルに対応する写真を制御します。

(2) カルーセル画像の配列がローカル画像であり、静的ファイルの下に配置されていない場合は、パスを require で丸で囲んでください。そうでない場合、パスはエラーを報告します。バックエンドサーバーから取得した場合は不要です。

data(){ return{ imgArray: [ require('../../img/item_01.png'), require('../../img/item_02.png'), require('../../img/item_03.png'), require('../../img/item_04.png') ] } }

(3) カスタム変数nowindexを変更することでカルーセル画像の状態を変更するのが主な目的ですが、スライド処理中に2枚の画像が表示されるため、短いタイミングで設定されています。このデバイスでは、一方を表示し、もう一方を非表示にすることができ、それぞれに異なるトランジション効果を追加できます。

ここで、この単純なカルーセル画像は終了します。

関連する無料学習の推奨事項:JavaScript(ビデオ)

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