jqueryでsliderを自作するなら

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

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

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