使用JavaScript溢出幻灯片内联一个元素

Question

我怎么能这样做

在一行中，并有箭头移动到其他未显示的部分，如

可以使用鼠标或触摸滑动，我找不到使用CSS和JavaScript甚至JQuery的任何示例

<div>
 <a>SOMETHING</a>
 <a>SOMETHING</a>
 <a>SOMETHING</a>
 <a>SOMETHING</a>
 <a>SOMETHING</a>
 <a>SOMETHING</a>
 <a>SOMETHING</a>
 <a>SOMETHING</a>
 <a>SOMETHING</a>
 <a>SOMETHING</a>
</div>

Answer 1

var left = document.getElementById('btnLeft');
  var right = document.getElementById('btnRight');
  var content = document.getElementById('abc');
  var outer = document.getElementById('outer');

  left.addEventListener('click',function(){
      //parseInt returns "120px" as 120, and parseInt("") is NaN 
      var leftMargin = parseInt(content.style.marginLeft);
      
      //if NaN make leftmargin 0 
      if(isNaN(leftMargin)) leftMargin = 0;
      
      //calculates scrollwidth of inner content which is outside containing block
      var widthContent = content.scrollWidth;
      //calculates containing width block
      var widthOuter = outer.getBoundingClientRect().width;
      
      // do not allow to increase leftmargin when content reaches end of right button 
      if(leftMargin > (widthOuter - widthContent)){
        // "20px" is per click content to move to left
        leftMargin-=20;
        content.style.marginLeft = leftMargin+"px";  
      }      
    
  });
  right.addEventListener('click',function(){
      var leftMargin = parseInt(content.style.marginLeft);
      if(isNaN(leftMargin)) leftMargin = 0;
      // do not allow content to move if content reaches left button and should not go further right
      if(leftMargin < 40){
        leftMargin+=20;
        content.style.marginLeft = leftMargin+"px";  
      }
      
  });

#abc{
      white-space: nowrap;/*allows content to remain in single line */
      border : 1px solid red;
      
    }
    .pos--left{
      position: absolute;
      left : 0px;
      top : 0px;
      
    }
    .pos--right{
      position: absolute;
      right : 0px;
      top : 0px;
      
    }
    #outer{
      overflow: hidden; /*makes window for inner content*/
      border : 3px solid green;
      position: relative;
    }

<div id="outer">
    <span class="pos--left"><button id="btnLeft">Left</button></span>
  
    <div id="abc">
      
       <a>SOMETHING1</a>
       <a>SOMETHING2</a>
       <a>SOMETHING3</a>
       <a>SOMETHING4</a>
       <a>SOMETHING5</a>
       <a>SOMETHING6</a>
       <a>SOMETHING7</a>
       <a>SOMETHING8</a>
       <a>SOMETHING9</a>
       <a>SOMETHING10</a>
       <a>SOMETHING11</a>
       <a>SOMETHING12</a>
       <a>SOMETHING13</a>
       <a>SOMETHING14</a>
       <a>SOMETHING15</a>
       <a>SOMETHING16</a>
       <a>SOMETHING17</a>
       <a>SOMETHING18</a>
       <a>SOMETHING19</a>
       <a>SOMETHING20</a>
       <a>SOMETHING21</a>
       <a>SOMETHING22</a>
       <a>SOMETHING23</a>
       <a>SOMETHING24</a>
       <a>SOMETHING25</a>
       <a>SOMETHING26</a>
       <a>SOMETHING27</a>
       <a>SOMETHING28</a>
    </div>
    <span class="pos--right"><button id="btnRight">Right</button></span>
  </div>

Answer 2

查看Slick Slider插件：http://kenwheeler.github.io/slick/

当我在我的一个项目中需要滑块时，我几乎只使用它。简单，可定制和可破解。