ブログ/お知らせ Knowledge

jqueryでsliderを自作するなら

コーディング

2017.03.05

Webデザイナーの平尾誠です。シンプルなスライダーごときならわざわざプラグイン入れる方がめんどくさかったりする。
だから現場でサクッとコピペして使えるようにここにライブラリとしておいておきますので、みなさんもコピペして使ってください。

jqueryでsliderを自作するなら

jqueryでsliderを自作するなら

HTML

[code]<code title="HTML">
<div class="slider">
<div class="slideSet">
<div class="slide01 slide">slide1</div>
<div class="slide02 slide">slide2</div>
<div class="slide03 slide">slide3</div>
<div class="slide04 slide">slide4</div>
<div class="slide05 slide">slide5</div>
</div>
</div>
<button class="slider-prev">前へ</button>
<button class="slider-next">次へ</button>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="slider.js"></script>
</code>
[/code]

css

 .slideSet > div {
            width: 800px;
            height: 250px;
            border: 1px solid #f00;
            box-sizing: border-box;
        }
        
        .slide {
            float: left;
        }
        
        .slideSet {
            position: absolute;
        }
        
        .slider {
            width: 800px;
            height: 250px;
            overflow: hidden;
            margin: 0 auto;
            position: relative;
        }
        
        .slide01 {
            background: red;
        }
        
        .slide02 {
            background: black;
        }
        
        .slide03 {
            background: blue;
        }
        
        .slide04 {
            background: aqua;
        }
        
        .slide05 {
            background: yellow;
        }

javascript

(function(){
	var slideWidth = $('.slide').outerWidth();	// .slideの幅を取得して代入
	var slideNum = $('.slide').length;	// .slideの数を取得して代入
	var slideSetWidth = slideWidth * slideNum;	// .slideの幅×数で求めた値を代入
	$('.slideSet').css('width', slideSetWidth);	// .slideSetのスタイルシートにwidth: slideSetWidthを指定

	var slideCurrent = 0;	// 現在地を示す変数

	// アニメーションを実行する独自関数
	var sliding = function(){
		// slideCurrentが0以下だったら
		if( slideCurrent < 0 ){
			slideCurrent = slideNum - 1;

		// slideCurrentがslideNumを超えたら
		}else if( slideCurrent > slideNum - 1 ){	// slideCUrrent >= slideNumでも可
			slideCurrent = 0;

		}

		$('.slideSet').stop().animate({
			left: slideCurrent * -slideWidth
		});
	}

	// 前へボタンが押されたとき
	$('.slider-prev').click(function(){
		slideCurrent--;
		sliding();
	});

	// 次へボタンが押されたとき
	$('.slider-next').click(function(){
		slideCurrent++;
		sliding();
	});
}());

ちなみに手っ取り早くスライダーを実装するならSwiper.jsがオススメです。