jQueryで超低機能なカルーセルスライダーを作ってみる

ども、おひさしぶりです。
ようやくパソコンの設置ができましたので、またちょこちょこと更新していければなと思います。

今日はjQueryでたまにみるカルーセルスライダー。プラグインを使ってもいいですが、結構JS触ってるのでそろそろ本当に簡単なものなら作れるんじゃないかとおもって、試しに作ってみました。

組み込む機能

とりあえずこれだけは入れておかないとダメだろうという機能を挙げていきます。

リストでも何でもいいけど、一定の法則で配置された要素を横に並べて順番にスライドさせる（今回はリストで作成）
ナビゲーションボタンがあってスライドを行ったり来たりさせられる
自動的に移動する機能はあってもいいし、無くてもいい
一番最後の要素まで来たら、最初に戻って欲しい

たぶんこのくらいの機能があれば、良いんじゃないんでしょうかね？

作ってみた

ということでできたのがこちら。

html

<div id="mycarousel">
    <div id="prev">&lt;</div>
    <div id="next">&gt;</div>
    <div id="slides">
        <ul>
            <li>
                <img src="http://placehold.jp/ea9999/ffffff/320x100.png?text=slide1" />
            </li>
            <li>
                <img src="http://placehold.jp/b6d7a8/ffffff/320x100.png?text=slide2" />
            </li>
            <li>
                <img src="http://placehold.jp/9fc5e8/ffffff/320x100.png?text=slide3" />
            </li>
        </ul>
    </div>
</div>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

scss

body {
    margin:0;
    padding:0;
}
#mycarousel {
    position: relative;
    width: 450px;
    height: 100px;
    margin: auto;
    overflow:hidden;
    #slides {
        position: relative;
        width: 340px;
        height: 100%;
        margin: auto;
        ul {
            list-style: none;
            padding: 0;
            height: 100%;
            li {
                float: left;
                width: 320px;
                height: 100%;
                padding:0 10px;
                display: inline;
                img {
                    border: none;
                }
            }
        }
    }
    #prev, #next {
        position: absolute;
        bottom: 5px;
        width: 30px;
        height:30px;
        border-radius:30px;
        line-height:30px;
        background-color: #1ba1e2;
        color:#fafafa;
        text-align:center;
        font-weight:bold;
        z-index: 100;
        cursor:pointer;
    }
    #prev {
        left: 5px;
    }
    #next {
        right: 5px;
    }
}

body {

margin:0;

padding:0;

}

#mycarousel {

position: relative;

width: 450px;

height: 100px;

margin: auto;

overflow:hidden;

#slides {

position: relative;

width: 340px;

height: 100%;

margin: auto;

ul {

list-style: none;

padding: 0;

height: 100%;

li {

float: left;

width: 320px;

height: 100%;

padding:0 10px;

display: inline;

img {

border: none;

}

#prev, #next {

position: absolute;

bottom: 5px;

width: 30px;

height:30px;

border-radius:30px;

line-height:30px;

background-color: #1ba1e2;

color:#fafafa;

text-align:center;

font-weight:bold;

z-index: 100;

cursor:pointer;

}

#prev {

left: 5px;

}

#next {

right: 5px;

}

javascript

jQuery(document).ready(function ($) {
    $(window).load(function () {
        NGCarousel('#mycarousel', 600);
    });
    function NGCarousel(target, animTime) {
        var wrap_width = $(target).width();
        var li_width = $(target + ' li').outerWidth();
        var li_num = $(target + ' li').size();
        var slides_width = li_width * li_num;
        $(target + ' ul').css({
            position: 'absolute',
            top: '0',
            left: '0',
            width: slides_width + 'px'
        });
        $('#prev').click(function () {
            do_slide_prev();
        });
        $('#next').click(function () {
            do_slide_next();
        });
        function do_slide_prev() {
            var slide_pos = $(target + ' ul').position();
            var sp_l = slide_pos['left'];
            if (sp_l >= 0) {
                $(target + ' ul:not(:animated)').animate({
                    left: '-=' + li_width * (li_num - 1)
                }, animTime);
            } else {
                $(target + ' ul:not(:animated)').animate({
                    left: '+=' + li_width
                }, animTime);
            }
        }
        function do_slide_next() {
            var slide_pos = $(target + ' ul').position();
            var sp_l = slide_pos['left'];
            var t = slides_width - li_width;
            if (sp_l <= '-' + t) {
                $(target + ' ul:not(:animated)').animate({
                    left: '+=' + li_width * (li_num - 1)
                }, animTime);
            } else {
                $(target + ' ul:not(:animated)').animate({
                    left: '-=' + li_width
                }, animTime);
            }
        }
    }
});

jQuery(document).ready(function ($) {

$(window).load(function () {

NGCarousel('#mycarousel', 600);

});

function NGCarousel(target, animTime) {

var wrap_width = $(target).width();

var li_width = $(target + ' li').outerWidth();

var li_num = $(target + ' li').size();

var slides_width = li_width * li_num;

$(target + ' ul').css({

position: 'absolute',

top: '0',

left: '0',

width: slides_width + 'px'

});

$('#prev').click(function () {

do_slide_prev();

});

$('#next').click(function () {

do_slide_next();

});

function do_slide_prev() {

var slide_pos = $(target + ' ul').position();

var sp_l = slide_pos['left'];

if (sp_l >= 0) {

$(target + ' ul:not(:animated)').animate({

left: '-=' + li_width * (li_num - 1)

}, animTime);

} else {

$(target + ' ul:not(:animated)').animate({

left: '+=' + li_width

}, animTime);

}

function do_slide_next() {

var slide_pos = $(target + ' ul').position();

var sp_l = slide_pos['left'];

var t = slides_width - li_width;

if (sp_l <= '-' + t) {

$(target + ' ul:not(:animated)').animate({

left: '+=' + li_width * (li_num - 1)

}, animTime);

} else {

$(target + ' ul:not(:animated)').animate({

left: '-=' + li_width

}, animTime);

}

});

今回は自動スライド機能はつけていませんが、あったほうがよさそうならば、タイマーを用意して定期的に do_slide_next() を呼んであげればOKだと思います。

とりあえずデモを用意してみました。

というわけでこれで一応「超低機能なカルーセル」が完成しました。

でも本当に最低限の機能しかありませんので、使いやすくするにはもうちょっと工夫が必要かもしれませんね。。

NeGiMeMo.net

jQueryで超低機能なカルーセルスライダーを作ってみる

組み込む機能

作ってみた

html

scss

javascript

いいね:

コメントするコメントをキャンセル

関連投稿

jQueryで超低機能なカルーセルスライダーを作ってみる

組み込む機能

作ってみた

html

scss

javascript

Share this:

いいね:

コメントする コメントをキャンセル

関連投稿

コメントするコメントをキャンセル