Vue を使用してスライディング カルーセルを実装する方法

Vue は、インタラクティブな Web アプリケーションをより簡単に構築できるようにする人気の JavaScript フレームワークです。今回はVueを使ってスライド式カルーセルを作成する方法を紹介します。

Vue CLI を使用して新しい Vue プロジェクトを作成し、Vue の公式カルーセル コンポーネントを使用してスライディング カルーセル チャートを実装します。具体的な手順は次のとおりです。

ステップ 1: Vue CLI をインストールする

Vue CLI をインストールするには、まず Node.js をインストールする必要があります。 Node.js をインストールしたら、ターミナルを開いて次のコードを実行できます:

npm install -g @vue/cli

これにより、Vue CLI がグローバルにインストールされます。

ステップ 2: Vue プロジェクトを作成する

Vue CLI をインストールしたら、それを使用して新しい Vue プロジェクトを作成できます。ターミナルに次のコードを入力します。

vue create my-project

これにより、「my-project」という名前の新しい Vue プロジェクトが作成され、必要な依存関係がすべてインストールされます。

ステップ 3: Vue カルーセル コンポーネントをインポートする

次のステップでは、Vue の公式カルーセル コンポーネントを使用する必要があります。プロジェクトの main.js ファイルに次のコードを追加することで、このコンポーネントをインポートできます:

import { Carousel, Slide } from 'vue-carousel';

Vue.component('carousel ' , Carousel);
Vue.component('slide', Slide);

これらのコードは、Carousel コンポーネントと Slide コンポーネントをインポートし、グローバル コンポーネントとして登録します。

ステップ 4: カルーセル チャート コンポーネントを作成する

次に、カルーセル チャートをホストする Vue コンポーネントを作成する必要があります。 src/components ディレクトリに「Carousel.vue」という名前の新しいファイルを作成し、その中に次のコードを追加します。

<slide v-for="(item, index) in items" :key="index">
  <img  :src="item.image" alt="Vue を使用してスライディング カルーセルを実装する方法" >
  <h4>{{ item.title }}</h4>
  <p>{{ item.description }}</p>
</slide>

<script><br>デフォルトのエクスポート {</p> data() {<p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>return { items: [ { title: 'Slide 1', description: 'This is the first slide.', image: 'https://via.placeholder.com/400x250?text=Slide+1' }, { title: 'Slide 2', description: 'This is the second slide.', image: 'https://via.placeholder.com/400x250?text=Slide+2' }, { title: 'Slide 3', description: 'This is the third slide.', image: 'https://via.placeholder.com/400x250?text=Slide+3' } ] }</pre><div class="contentsignin">ログイン後にコピー</div></div><br> }<br>}</p></script>

このコンポーネントは、手順 3 でインポートしたカルーセル コンポーネントとスライド コンポーネントを使用します。 v-for ディレクティブを使用して項目配列を反復処理し、それを使用して各スライドを設定しました。この例では、プレースホルダー画像とタイトル/説明を使用しているだけですが、特定のニーズに合わせてこれを変更できます。

ステップ 5: カルーセル コンポーネントの使用

カルーセル コンポーネントを作成したので、それを Vue アプリケーションで使用する必要があります。 App.vue ファイルを開き、次のコードを追加します: