Vue.jsのプラグイン機能を使用してWebページをちょっぴり進化させる

11108 ワード
Webサービス JavaScript Vue.js HTTP Carousel JavaScript テキストリンク

Vue.jsのプラグイン機能であるVue Carouselを使用して、
Webページをちょっとだけ進化させてみました。

今回追加した機能の動き
このような形で画像等のスライド移動が出来るようになります。

「Vue Carousel」とは

Vue.jsで簡単にカルーセルスライダーを導入できるプラグインです。
導入はnpmコマンドで導入する方法とCDNより読み込む方法があります。
今回はCDNより読み込む方法で実施しています。

Webページ

公開ページ(現在申請中)取得済

コード

HTML

index.html
<body>
    <header>
        <link rel="stylesheet" href="main.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <h1>
            <a href="index.html"><img src="town4.png" alt="街を作ろう"></a>
        </h1>
        <nav id="global_navi">
            <ul>
                <li class="current"><a href="index.html">HOME</a></li>
                <li><a href="index.html">ブロックを作成する</a></li>
                <li><a href="index.html">作品ギャラリー</a></li>
                <li><a href="index.html">IoTブロック作品</a></li>
                <li><a href="index.html">AIで設計書作成</a></li>
                <li><a href="index.html">お問い合わせ</a></li>
            </ul>
        </nav>
    </header>
    <div id="VueCarousel-slide">
        <carousel :per-page="4" :navigation-enabled="true" navigation-prev-label="＜　PREV" navigation-next-label="NEXT ＞ " :speed="900">
            <slide>
                <img src="nanoblock1.jpg" width="300" alt="フリーザー">
            </slide>
            <slide>
                <img src="nanoblock2.jpg" width="300" alt="ピカチュウ">
            </slide>
            <slide>
                <img src="nanoblock3.jpg" width="300" alt="カビゴン">
            </slide>
            <slide>
                <img src="nanoblock4.jpg" width="300" alt="サンダー">
            </slide>
            <slide>
                <img src="nanoblock5.jpg" width="300" alt="ゲンガー">
            </slide>
            <slide>
                <img src="nanoblock6.jpg" width="300" alt="ラッキー">
            </slide>
            <slide>
                <img src="nanoblock8.jpg" width="300" alt="ファイヤー">
            </slide>
        </carousel>
    </div>
    <script src="https://ssense.github.io/vue-carousel/js/vue-carousel.min.js"></script>
    <script src="main.js"></script>
    </div>

CSS

main.css
.VueCarousel-slide {
    position: relative;
    min-height: 200px;
    text-align: center;
    font-size: 18px;
    background-color: #666666;
    /* グレー */
    color: #333;
    /* 黒 */
}

.label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

JavaScript

main.js
new Vue({
    el: '#VueCarousel-slide',
    components: {
        carousel: VueCarousel.Carousel,
        slide: VueCarousel.Slide,
    },
});

コードの説明

次に詳細を説明します。

HTML
<div id="VueCarousel-slide">の直後の部分では、
カルーセルスライドが何枚なのか、スライド速度はどれくらいなのか等を定義しています。具体的には次の通りです。

  • per-page="4" : 1スライドに何枚表示するかの設定です。今回は4枚を表示しています。

  • navigation-enabled="true" : navigationラベルを使用できるようにする設定です。具体的には以下が使用できるようになります。

    • navigation-prev-label="＜　PREV" : 戻る場合の表示内容を設定します。
    • navigation-next-label="NEXT ＞ " : 進む場合の表示内容を設定します。

  • speed="900" : スライドが遷移する速度です。500がデフォルト値で数字が大きいと速度がゆっくりになります。

CSS
スライドの縦横の長さや背景色を定義しています。

JavaScript
'#VueCarousel-slide'と、HTML上の'div id="VueCarousel-slide'の部分は、内容自体は任意ですが整合している必要があるため、値が同じことを確認してください。

以上です。

参考リンク

終わりに

次に機会があれば、参考リンクに記載されているようにボタンの押下でスライド移動ができるような実装も試してみたいです。