jqueryでsliderを自作するなら

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

HTML

    
slide1
slide2
slide3
slide4
slide5

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がオススメです。

あわせて読みたい
スライダーを作るのにSwiper.js以外のプラグインはもう要らない

ほなね

この記事の知識を動画講座で学ぶ