sikaku

スライダーを作った

  • 伏見稲荷神社/京都
  • 伏見稲荷神社/京都
  • 九份/台湾
  • 鉄道博物館/埼玉

いつも大概ですが、３割増しくらいで有用性のない記事です。

ただ単に「こういう動きのスライダー作る！！！」で作ったものを置いているだけで拡張性も解説もなく、改変方法も面倒です。

やりたかったこと
  • 一件のみ表示
  • 前後ボタン対応
  • スワイプ対応
  • スワイプ時の移動値が小さい場合はスライドしない
  • はみ出し部分は縁がぼやけるようにする

察しのいい人は「アレじゃん」ってなるかもしれないスライダー

余裕のあるときに色々追記するかもしれません。

source code

jQuery_プラグイン
  1. (function( $ ){
  3. $.fn.sgSlider = function(opt) {
  5. var set = $.extend({
  6. duration: 100,
  7. easing: 'swing',
  8. swipe: 10,
  9. first: 0
  10. },opt);
  12. var pc = (window.ontouchstart!==null)?true:false;
  13. var click = {
  14. start: pc ? 'mousedown':'touchstart',
  15. move: pc ? 'mousemove':'touchmove',
  16. end: pc ? 'mouseup mouseleave':'touchend'
  17. }
  18. function clickData(e) {
  19. return pc?e||window.event:e.originalEvent.touches[0];
  20. }
  21. function rangeInt(n,min,max){
  22. if( n<min ) return min;
  23. if( n>max ) return max;
  24. return n;
  25. }
  27. return this.each(function(){
  28. var $group = $(this);
  29. var $wrp = $group.find('[name="slider"]');
  30. var $tgt = $wrp.children();
  31. var $li = $tgt.children();
  32. var $prev = $group.find('[name="prev"]');
  33. var $next = $group.find('[name="next"]');
  35. var data = {
  36. w: 0,
  37. s: 0,
  38. l: $li.length-1,
  39. p: $tgt.css('position')
  40. };
  41. var flg = {
  42. n: -1,
  43. p: 0,
  44. c: false,
  45. s: false
  46. };
  47. function slide(n,t) {
  48. var b = flg.n;
  49. flg.n = rangeInt(n+b,0,data.l);
  50. flg.p = $li.eq(flg.n).position().left * -1;
  51. var css = {left:flg.p};
  52. if( t ) $tgt.css(css);
  53. else $tgt.animate(css,set.duration,set.easing);
  54. if( b==flg.n && !t ) return true;
  55. if( $next.length && check(data.l) )
  56. $next.toggleClass('false');
  57. if( $prev.length && check(0) )
  58. $prev.toggleClass('false');
  59. function check(p){ return ( b==p||flg.n==p )}
  60. }
  62. $tgt.css({
  63. 'position':data.p=='static'?'relative':data.p,
  64. 'display' :'inline-flex'
  65. });
  66. $(window).on('resize',function(){
  67. var w = $wrp.width();
  68. if( w == data.w ) return true;
  69. if( set.swipe ) data.s = w/set.swipe;
  70. data.w = w;
  71. $li.outerWidth(w);
  72. slide(flg.n<0?(set.first=='last'?data.l:set.first)+1:0,true);
  73. }).trigger('resize');
  75. $tgt.on(click.start,function(e){
  76. e = clickData(e);
  77. if( pc && e.button ) return true;
  78. flg.c = e.clientX;
  79. }).on(click.move,function(e){
  80. if( !set.swipe || !flg.c ) return true;
  81. e.preventDefault();
  82. e = clickData(e);
  83. flg.s = e.clientX;
  84. $tgt.css({left:flg.s-flg.c+flg.p});
  85. }).on(click.end,function(e){
  86. if( !flg.c ) return true;
  87. if( flg.s ) {
  88. var m = flg.c-flg.s;
  89. slide(Math.abs(m)<data.s?0:(m<0?-1:1));
  90. flg.s = false;
  91. }
  92. flg.c = false;
  93. });
  95. if($prev.length) $prev.on('click',function(){slide(-1)});
  96. if($next.length) $next.on('click',function(){slide( 1)});
  98. });
  99. };
  101. })( jQuery );
jQuery_呼び出し
  1. $('#demo').sgSlider();
HTML_必要最小限
  1. <div id="demo">
  3. <div name="slider">
  4. <ul>
  5. <li>スライド１</li>
  6. <li>スライド２</li>
  7. <li>スライド３</li>
  8. <li>スライド４</li>
  9. <li>スライド５</li>
  10. </ul>
  11. </div>
  13. <span name="prev">前へ</span>
  14. <span name="next">次へ</span>
  16. </div>
CSS_はみ出し部分の制御
  1. [name="slider"] {
  2. --fade-w: 5px;
  3. --fade-g: linear-gradient(90deg,transparent,#000 var(--fade-w),#000 calc( 100% - var(--fade-w) ),transparent);
  4. margin: 0 calc( var(--fade-w) * -1 );
  5. padding: 0 var(--fade-w);
  6. overflow: hidden;
  7. -webkit-mask: var(--fade-g);
  8. mask: var(--fade-g);
  9. }