jQueryで十字型スライダーの作り方

Last updated at 2017-07-21Posted at 2017-07-19

なぜつくろうとしたか

仕事で十字のスライダー(カルーセル)の実装の必要があり、プラグインでは対応できないと感じたのでつくりました。

デモ
(Herokuの無料プランでサーバーを立てているので、初回の接続は時間が掛かります)

作り方

参考ページ

jQueryを使ったスライダーの作り方とその仕組み
横方向へのスライダーは、こちらのページを参照してください。
ここから手を加えて、縦方向にも動くようにします。

ソース

1ファイルでサクッと動作確認するために、html,css,jsをまとめてあります。

ソースはGitHubにもあげてます。

cross_slider.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>slide</title>
    <style>
        .slider .slide-x {
            width: 315px;
            height: 360px;
            float: left;
            margin: 0;
            padding: 0;
        }

        .slider .slide-set {
            position: absolute;
            }

        .slider {
            width: 315px;
            height: 360px;
            overflow: hidden;
            position: relative;
            border: 1px solid #ddd;
            border-bottom: 3px solid #ddd;
            margin: auto;
        }
    </style>
</head>
<body>

<div id="wrap">
    <div class="slider">
        <div class="slide-set">

            <div class="slide-y">
                <div class="slide-x">
                    <h1>slide1-1</h1>
                </div>

                <div class="slide-x">
                    <h1>slide1-2</h1>
                </div>

                <div class="slide-x">
                    <h1>slide1-3</h1>
                </div>
            </div>

            <div class="slide-y">
                <div class="slide-x">
                    <h1>slide2-1</h1>
                </div>

                <div class="slide-x">
                    <h1>slide2-2</h1>
                </div>

                <div class="slide-x">
                    <h1>slide2-3</h1>
                </div>
            </div>

            <div class="slide-y">
                <div class="slide-x">
                    <h1>slide3-1</h1>
                </div>

                <div class="slide-x">
                    <h1>slide3-2</h1>
                </div>

                <div class="slide-x">
                    <h1>slide3-3</h1>
                </div>
            </div>

        </div>
    </div>
</div>

<button class="slider-left">左へ</button>
<button class="slider-right">右へ</button>
<button class="slider-above">上へ</button>
<button class="slider-below">下へ</button>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        "use strict";

        var slideNumX = $('.slide-x').length;  // .slide-xの数を取得して代入
        var slideNumY = $('.slide-y').length;  // .slide-yの数を取得して代入
        slideNumX = slideNumX / slideNumY;  // 1行あたりの.slide-xの数を求める
        
        var slideWidth = $('.slide-x').outerWidth(); // .slide-xの幅を取得して代入
        var slideSetWidth = slideWidth * slideNumX; // .slideの幅×数で求めた値を代入
        $('.slide-set').css('width', slideSetWidth); // .slideSetのスタイルシートにwidth: slideSetWidthを指定
        
        var slideHeight = $('.slide-x').outerHeight(); // .slide-yの幅を取得して代入
        var slideSetHeight = slideHeight * slideNumY; // .slide-yの長さ×数で求めた値を代入
        $('.slide-set').css('height', slideSetHeight); // .slideSetのスタイルシートにheight: slideSetHeightを指定

        var slideCurrentX = 0; // 現在地を示す変数X軸
        var slideCurrentY = 0; // 現在地を示す変数Y軸

        // アニメーションを実行する独自関数
        function slidingX() {
            // slideCurrentXが0以下だったら
            if (slideCurrentX < 0) {
                slideCurrentX = slideNumX - 1;
                // 一番左上端か判定
                if (slideCurrentY === 0) {
                    slideCurrentY = slideNumY - 1;
                } else {
                    slideCurrentY--;
                }
                slidingY();

                // slideCurrentXがslideNumXを超えたら
            } else if (slideCurrentX > slideNumX - 1) { // slideCUrrentX >= slideNumXでも可
                slideCurrentX = 0;
                // 一番右下端か判定
                if (slideCurrentY === slideNumY - 1) {
                    slideCurrentY = 0;
                } else {
                    slideCurrentY++;
                }
                slidingY();
            }

            $('.slide-set').stop(false, true).animate({
                left: slideCurrentX * -slideWidth
            }, 500);
        }

        function slidingY() {
            // slideCurrentYが0以下だったら
            if (slideCurrentY < 0) {
                slideCurrentY = slideNumY - 1;
                // 一番左上端か判定
                if (slideCurrentX === 0) {
                    slideCurrentX = slideNumX - 1;
                } else {
                    slideCurrentX--;
                }
                slidingX();

                // slideCurrentYがslideNumYを超えたら
            } else if (slideCurrentY > slideNumY - 1) { // slideCUrrentX >= slideNumでも可
                slideCurrentY = 0;
                // 一番右下端か判定
                if (slideCurrentX === slideNumX - 1) {
                    slideCurrentX = 0;
                } else {
                    slideCurrentX++;
                }
                slidingX();
            }

            $('.slide-set').stop(false, true).animate({
                top: slideCurrentY * -slideHeight
            }, 500);
        };

        // 左へボタンが押されたとき
        $('.slider-left').click(function () {
            slideCurrentX--;
            slidingX();
        });

        // 右へボタンが押されたとき
        $('.slider-right').click(function () {
            slideCurrentX++;
            slidingX();
        });

        // 下へボタンが押されたとき
        $('.slider-below').click(function () {
            slideCurrentY++;
            slidingY();
        });

        // 上へボタンが押されたとき
        $('.slider-above').click(function () {
            slideCurrentY--;
            slidingY();
        });
    }());
</script>
</body>
</html>

解説

###css

        .slider .slide-x {
            width: 315px;
            height: 360px;
            float: left;
            margin: 0;
            padding: 0;
        }

        .slider .slide-set {
            position: absolute;
            }

        .slider {
            width: 315px;
            height: 360px;
            overflow: hidden;
            position: relative;
            border: 1px solid #ddd;
            border-bottom: 3px solid #ddd;
            margin: auto;
        }

cssはwidth,height両方をに固定にします。

html

    <div class="slider">
        <div class="slide-set">

            <div class="slide-y">
                <div class="slide-x">
                    <h1>slide1-1</h1>
                </div>

                <div class="slide-x">
                    <h1>slide1-2</h1>
                </div>

                <div class="slide-x">
                    <h1>slide1-3</h1>
                </div>
            </div>

            <div class="slide-y">
                <div class="slide-x">
                    <h1>slide2-1</h1>
                </div>

                <div class="slide-x">
                    <h1>slide2-2</h1>
                </div>

                <div class="slide-x">
                    <h1>slide2-3</h1>
                </div>
            </div>

            <div class="slide-y">
                <div class="slide-x">
                    <h1>slide3-1</h1>
                </div>

                <div class="slide-x">
                    <h1>slide3-2</h1>
                </div>

                <div class="slide-x">
                    <h1>slide3-3</h1>
                </div>
            </div>

        </div>
    </div>

このソースは、3×3の箱を並べてあるイメージです。
slide-yで縦軸の制御、slide-xで横軸の制御を行っています。

JavaScript

    $(function () {
        "use strict";

        var slideNumX = $('.slide-x').length;  // .slide-xの数を取得して代入
        var slideNumY = $('.slide-y').length;  // .slide-yの数を取得して代入
        slideNumX = slideNumX / slideNumY;  // 1行あたりの.slide-xの数を求める
        
        var slideWidth = $('.slide-x').outerWidth(); // .slide-xの幅を取得して代入
        var slideSetWidth = slideWidth * slideNumX; // .slideの幅×数で求めた値を代入
        $('.slide-set').css('width', slideSetWidth); // .slideSetのスタイルシートにwidth: slideSetWidthを指定
        
        var slideHeight = $('.slide-x').outerHeight(); // .slide-yの幅を取得して代入
        var slideSetHeight = slideHeight * slideNumY; // .slide-yの長さ×数で求めた値を代入
        $('.slide-set').css('height', slideSetHeight); // .slideSetのスタイルシートにheight: slideSetHeightを指定

        var slideCurrentX = 0; // 現在地を示す変数X軸
        var slideCurrentY = 0; // 現在地を示す変数Y軸

参考ソース元の横軸制御に追加して、縦軸の制御するための変数を定義してあげましょう。

        slideNumX = slideNumX / slideNumY;  // 1行あたりの.slide-xの数を求める

slide-xは縦の箱の数分存在するので、slide-yの数で割ってあげて、1行あたりのslide-xの数を求めてあげましょう。

        function slidingX() {
            // slideCurrentXが0以下だったら
            if (slideCurrentX < 0) {
                slideCurrentX = slideNumX - 1;
                // 一番左上端か判定
                if (slideCurrentY === 0) {
                    slideCurrentY = slideNumY - 1;
                } else {
                    slideCurrentY--;
                }
                slidingY();

                // slideCurrentXがslideNumXを超えたら
            } else if (slideCurrentX > slideNumX - 1) { // slideCUrrentX >= slideNumXでも可
                slideCurrentX = 0;
                // 一番右下端か判定
                if (slideCurrentY === slideNumY - 1) {
                    slideCurrentY = 0;
                } else {
                    slideCurrentY++;
                }
                slidingY();
            }

            $('.slide-set').stop(false, true).animate({
                left: slideCurrentX * -slideWidth
            }, 500);
        }

横軸移動のためのslidingX関数を定義してあげます。

            // slideCurrentXが0以下だったら
            if (slideCurrentX < 0) {
                slideCurrentX = slideNumX - 1;
                // 一番左上端か判定
                if (slideCurrentY === 0) {
                    slideCurrentY = slideNumY - 1;
                } else {
                    slideCurrentY--;
                }
                slidingY();

表示されている箱が一番左上の場合で、「左へ」が押された場合は、一番右下まで移動してあげるよう処理をしてあげます。

                // slideCurrentXがslideNumXを超えたら
            } else if (slideCurrentX > slideNumX - 1) { // slideCUrrentX >= slideNumXでも可
                slideCurrentX = 0;
                // 一番右下端か判定
                if (slideCurrentY === slideNumY - 1) {
                    slideCurrentY = 0;
                } else {
                    slideCurrentY++;
                }
                slidingY();
            }

同じように、一番右端が表示されている場合に「右へ」が押された場合は、一番左上まで移動します。

        function slidingY() {
            // slideCurrentYが0以下だったら
            if (slideCurrentY < 0) {
                slideCurrentY = slideNumY - 1;
                // 一番左上端か判定
                if (slideCurrentX === 0) {
                    slideCurrentX = slideNumX - 1;
                } else {
                    slideCurrentX--;
                }
                slidingX();

                // slideCurrentYがslideNumYを超えたら
            } else if (slideCurrentY > slideNumY - 1) { // slideCUrrentX >= slideNumでも可
                slideCurrentY = 0;
                // 一番右下端か判定
                if (slideCurrentX === slideNumX - 1) {
                    slideCurrentX = 0;
                } else {
                    slideCurrentX++;
                }
                slidingX();
            }

            $('.slide-set').stop(false, true).animate({
                top: slideCurrentY * -slideHeight
            }, 500);
        };

横軸移動のslidingX関数と同様に、縦軸移動のslidingY関数を定義していきます。
最初は複雑そうに思えますけど、分解すると簡単です。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up