Webデザイナーの平尾誠です。シンプルなスライダーごときならわざわざプラグイン入れる方がめんどくさかったりする。
だから現場でサクッとコピペして使えるようにここにライブラリとしておいておきますので、みなさんもコピペして使ってください。
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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> |
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
.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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
(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以外のプラグインはもう要らない
ほなね