コーディング

Swiper.js

2017.02.15

http://idangero.us/swiper/

Swiper.jsはレスポンシブ対応のコンテンツスライダーとしておすすめです。

DEMOページにはオーソドックスなカルーセル以外にも、様々なタイプのサンプルが用意されています。

さらに、充実したAPIとコールバックによって様々な関数処理を実行することができます。

コールバックとは…　他関数の引数として、特定のタイミングで実行することができます。
例）「処理Aが終わった後に、処理Bを実行したい」

過去の使用実績としては、全画面タイプのスライドを６枚まで自動再生＋マウスホイールでもページ送り、
最後のスライドに到達した時点でホイール判定を無効化し下部のコンテンツを見せる。
といったスライダーを実装しました。

基本のHTML構造としては下記。

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
    
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>

<div class="swiper-slide">Slide 1</div>

<div class="swiper-slide">Slide 2</div>

<div class="swiper-slide">Slide 3</div>

...

</div>

</div>

CSSはこちら

html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

html, body {

position: relative;

height: 100%;

}

body {

background: #eee;

font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

font-size: 14px;

color:#000;

margin: 0;

padding: 0;

}

.swiper-container {

width: 100%;

height: 100%;

}

.swiper-slide {

text-align: center;

font-size: 18px;

background: #fff;

/* Center slide text vertically */

display: -webkit-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

-webkit-box-pack: center;

-ms-flex-pack: center;

-webkit-justify-content: center;

justify-content: center;

-webkit-box-align: center;

-ms-flex-align: center;

-webkit-align-items: center;

align-items: center;

}

Script部分はこんな感じ

<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination', //ページネーション表示
        paginationClickable: true, //ページネーションのクリック有効
        direction: 'vertical', //垂直方向に動作
        loop: true, //ループ動作
        autoplay: 5000, //自動再生開始までの待ち時間
        speed: 500, //スライドの切り替えに要する時間
        mousewheelControl: true, //マウスホイールでページ送り
        queueEndCallbacks: true,
        onReachEnd: function(){ //最後のスライドまで達したときに実行する処理
            swiper.disableMousewheelControl(); //マウスホイール判定を無効化
            swiper.disableTouchControl(); //タッチ判定を無効化
        },
          
        });

</script>