Vueでhtml描画後にjQueryでサムネイル付きスライダーにする方法

こんにちは。

ReactやAngular jsなど人気のjsフレームワークがたくさんありますがその中でも人気が上がってきているのがVue.jsです。

Vue.jsは学習コストが低くサイトをパーツ単位で管理ができるためシンプルでコード量も少なくなることから管理や修正がしやすく人気があります。

今回はサイトでもよく使われるスライダーをVueとjQueryで実装する方法を紹介してきます。

スライダーならVueで作ればいいじゃんと思うかもしれませんが今までjQueryに慣れている人がVue.jsを触ったばかりだと実装で戸惑ってしまうこともあると思います。

そこで今回はhtml部分をVueで描画して描画後にjQueryでスライダー化させるという方法でスライダーを作っていきたいと思います。

サムネイル付きスライダー作成
1. html
2. css
3. js
Vue.jsの勉強におすすめしたい本
1. たった1日で基本が身に付く！Vue.js超入門
2. Vue.js入門基礎から実践アプリケーション開発まで

サムネイル付きスライダー作成

html

まず下記のファイルを読み込みます。

スライダーはbxsliderを使った例になります。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

次にスライダー部分のhtmlになります。

<div id="app">
        <section id="app-slider">
                <temp-cont></temp-cont>
        </section>
</div>

css

.slider figure{
        display: flex;
    justify-content: center;   
}

.bx-wrapper{
        border: none;
        box-shadow: none;      
}

.slider-thumb li{
        display: inline-block;
        width: 60px;
}
.slider-thumb li a{
        display: block;
        width: 60px;
        height: 60px;  
}

.slider-thumb li a.active{border: solid 1px #000;}

.slider-thumb li a figure{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;  
}
.slider-thumb li a figure img{
        max-width: 60px;
        max-height: 60px;
}

js

Vue.component('temp-cont', {
        template: `<div>

        <div class="slider">
                <div>
                        <figure>
                                <img src="https://placehold.jp/300x500.png" alt="画像">
                        </figure>
                </div>
                <div>
                        <figure>
                                <img src="https://placehold.jp/300x500.png" alt="画像">
                        </figure>
                </div>
                <div>
                        <figure>
                                <img src="https://placehold.jp/300x500.png" alt="画像">
                        </figure>
                </div>                         
        </div>
        <div class="slider-thumb-inner">
                <ul class="slider-thumb">
                        <li>
                                <a href="#">
                                        <figure>
                                                <img src="https://placehold.jp/300x500.png" alt="画像">
                                        </figure>
                                </a>   
                        </li>
                        <li>
                                <a href="#">
                                        <figure>
                                                <img src="https://placehold.jp/300x500.png" alt="画像">
                                        </figure>
                                </a>   
                        </li>
                        <li>
                                <a href="#">
                                        <figure>
                                                <img src="https://placehold.jp/300x500.png" alt="画像">
                                        </figure>
                                </a>   
                        </li>
                </ul>
        </div> 
        </div>`,
        mounted: function() {
                jQuery('.slider').bxSlider({
                        auto: false,
                        pagerCustom: '.slider-thumb',
                        minSlides: 1,
                        maxSlides: 1,
                        responsive: true,
                });
                jQuery('.slider-thumb a').each(function(index) {
                                jQuery(this).attr('data-slide-index', index);
                        });
        },
})
                         
new Vue({
        el: '#app',              
});

Vueでメインのスライダーとサムネイル部分を描画していきます。

Vueの描画が終わったらmountedでbxSliderを実行します。

以上です。

Vue.jsの勉強におすすめしたい本

たった1日で基本が身に付く！Vue.js超入門

とにかく短い期間でVue.jsの基礎だけを覚えてしまいたい人におすすめの入門書です。

リンク

Vue.js入門基礎から実践アプリケーション開発まで

Vue.jsを初心者レベルから実践まで徹底的にわかりやすく解説されている本です。

vueの書き方から適用例まで詳しく書かれているのでvue.jsを覚えたい人におすすめです。

僕もこの本をいまでも使っていますしVue.jsをはじめたときにこの本で勉強しました。

リンク