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

こんにちは。

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

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

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

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

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

未経験でも安心!人気のオンラインプログラミングスクール

未経験からプログラミングが学べて就職までをサポート!

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

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を実行します。

以上です。

コメント

タイトルとURLをコピーしました