jqueryでsliderを自作するなら

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

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

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>

<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>

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;
}

.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();
});
}());