スライダーサンプル

###完成イメージ
[![https://gyazo.com/5dfccf57d15229a4efe969b7615f68db](https://i.gyazo.com/5dfccf57d15229a4efe969b7615f68db.gif)](https://gyazo.com/5dfccf57d15229a4efe969b7615f68db)

###HTML
```
<body>
  <div class="slider-container">    
    <div class="slider">    
      <div class="slideSet">    
        <div class="slide01 slide"></div> 
        <div class="slide02 slide"></div>   
        <div class="slide03 slide"></div>   
      </div>  
    </div>    
<!-- 次へボタン -->   
    <p class="slider-next"><i class="fa fa-chevron-circle-right fa-2x" aria-hidden="true"></i></p>
<!-- 前へボタン -->
    <p class="slider-prev"><i class="fa fa-chevron-circle-left fa-2x" aria-hidden="true"></i></p>
  </div>
</body>
```
スライドさせるための矢印は、「FontAwesome」を使用。

###CSS
```
body {    
  background-color: #f1f1f1;      
  margin: 0 auto;     
  width: 100%;      
}       
.slider-container {       
  margin-left: auto;      
  margin-right: auto;       
  margin-top: 10px;       
  width: 640px;       
  position: relative;       
}               
.slideSet div {       
  width: 800px;       
  height: 250px;        
  box-sizing: border-box;       
}             
.slide {        
  float: left;        
}               
.slideSet {       
  position: absolute;       
  height: 300px;        
}               
.slideSet ul {        
  width: 300px;     
  position: absolute;     
  top: 150px;     
  list-style: none;       
  color: #FFF;        
  background-color: #333;       
  opacity: 0.8;       
  padding: 20px;        
  margin-left: 30px;        
}             
.slider-next {        
  position: absolute;     
  top:110px;      
  left:660px;     
}               
.slider-prev {        
  margin-left: -50px;     
  position: absolute;     
  top:108px;      
}               
.slider {       
  width: 640px;       
  height: 250px;        
  overflow: hidden;       
  margin: 0 auto;       
  position: relative;       
}       
.slide01 {        
  background: url("https://xxx.xxxx.xxxx");      
  background-size: contain;     
}
.slide02 {        
  background: url("https://xxx.xxxx.xxxx");      
  background-size: contain;     
}              
.slide03 {        
  background: url("https://xxx.xxxx.xxxx");      
  background-size: contain;     
}
```

###js
```
(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();  
    });
}());
```