JS圖像滑塊/旋轉木馬顯示5項而不是1

Question

我有一個JS圖像滑塊，當前顯示一個項目，然後垂直移動。我想改變它，所以它一次顯示5個項目並且水平移動，但是我無法確定是否需要更改JS或CSS。

我已經嘗試調整每個項目的寬度，並使它們顯示：內聯塊，但它並沒有區別。

<div class="contentBoxContent" id="officers-slider"> 
    <div class="prev"> 
     <div class="arrow glyphicon glyphicon-chevron-left"> 
     </div> 
    </div> 
    <div class="next"> 
     <div class="arrow glyphicon glyphicon-chevron-right pull-right"> 
     </div> 
    </div> 
    <ul class="officers-list"> 
     <li> 
      <div class="officers-left"> 
       <h3>name1</h3> 
      </div> 
     </li> 

     <li> 
      <div class="officers-left"> 
       <h3>Name2</h3> 
      </div> 
     </li> 

     <li> 
      <div class="officers-left"> 
       <h3>Name3</h3> 
      </div> 
     </li> 

     <li> 
      <div class="officers-left"> 
       <h3>Name4</h3> 
      </div> 
     </li> 

     <li class="visibleOfficer"> 
      <div class="officers-left"> 
       <h3>Name5</h3> 
      </div> 
     </li> 

     <li> 
      <div class="officers-left"> 
       <h3>Name6</h3> 
      </div> 
     </li> 

     <li> 
      <div class="officers-left"> 
       <h3>Name7</h3> 
      </div> 
     </li> 

     <li> 
    </ul> 
</div> 

JS

(function($) { 

    $.fn.officersSlider = function(opts) { 

     // default configuration 
     var config = $.extend({}, { 
      autoplay:true, 
      delay: 6000, 
      speed: 1000, 
      slideHeight: 165, 
      activeClass: 'visibleOfficer', 
      easing: 'easeInOutQuad' 
     }, opts); 

     var visible = $(this).find('.' + config.activeClass); 
     var elementList = $(this).find('li'); 
     var intrv ,intrv2; 

     function Init(e) {    
      var index = visible.index(); 
      var visiblePos = config.slideHeight/2; 

      elementList.each(function(i) { 
       if(i < index) 
        $(this).css({ 
         position: 'absolute', 
         top: visiblePos - config.slideHeight * (index - i) 
        }); 
       else if(i === index) { 
        $(this).css({ 
         position: 'absolute', 
         top: visiblePos 
        }); 
       } 
       else if(i > index) 
        $(this).css({ 
         position: 'absolute', 
         top: visiblePos + config.slideHeight * (i - index) 
        }); 
      }); 

      AutoPlay(e); 
      PauseHandler(e); 
      ButtonClick(e); 
     } 

     function ButtonClick(e) { 
      var next = e.find('.officers-next'); 
      var prev = e.find('.officers-prev'); 

      next.on('click', function() { 
       elementList.promise().done(function() { 
        elementList.clearQueue().finish(); 
        SwitchNext(e); 
       }); 
      }); 

      prev.on('click', function() { 
       elementList.promise().done(function() { 
        elementList.clearQueue().finish(); 
        SwitchPrev(e); 
       }); 
      }); 
     } 

     function PauseHandler(e) { 
      e.on({ 
       'mouseenter' : function(){ 
        StopAutoPlay(); 
       }, 
       'mouseleave' : function(){ 
        intrv2 = setTimeout(function() { AutoPlay(e); }, config.delay); 
       } 
      }); 
     } 

     function AutoPlay(e) { 
      SwitchNext(e); 
      intrv = setTimeout(function() { AutoPlay(e); }, config.delay); 
     } 

     function StopAutoPlay() { 
      clearTimeout(intrv); 
      clearTimeout(intrv2); 
     } 

     function SwitchNext(e) { 

      for(var i = 0; i < elementList.length; i++) { 
       var curr_pos = findPos(elementList[i])[1];    
       $(elementList[i]).clearQueue().finish().animate({ top: curr_pos - config.slideHeight }, 
              { duration: config.speed, 
              easing: config.easing 
              });    
      } 

      var firstObj = visible.parent().children('li').first(); 
      var lastObjTop = visible.parent().children('li').last().css('top'); 
      lastObjTop = parseFloat(lastObjTop.replace('px', '')); 
      var clonefirstObj = firstObj.clone().css({ 
       'top': lastObjTop 
      }); 

      visible.parent().append(clonefirstObj); 
      firstObj.remove(); 

      setNextActive(visible); 
      elementList = e.find('li'); 

     } 

     function SwitchPrev(e) { 

      for(var i = 0; i < elementList.length; i++) { 
       var curr_pos = findPos(elementList[i])[1];    
       $(elementList[i]).clearQueue().finish().animate({ top: curr_pos + config.slideHeight }, 
                  { duration: config.speed, 
                  easing: config.easing 
                  });    
      } 

      var lastObj = visible.parent().children('li').last(); 
      var firstObjTop = visible.parent().children('li').first().css('top'); 
      firstObjTop = parseFloat(firstObjTop.replace('px', '')); 

      var clonelastObj = lastObj.clone().css({ 
       'top': firstObjTop 
      }); 

      visible.parent().prepend(clonelastObj); 
      lastObj.remove(); 

      setPrevActive(visible); 
      elementList = e.find('li'); 

     } 

     function findPos(obj) { 
      var curleft, 
       curtop; 
      curleft = curtop = 0; 
      if (obj.offsetParent) { 
       curleft = obj.offsetLeft; 
       curtop = obj.offsetTop; 
       while (obj === obj.offsetParent) { 
        curleft += obj.offsetLeft; 
        curtop += obj.offsetTop; 
       } 
      } 
      return [curleft,curtop]; 
     } 

     function setNextActive(elem) { 
      elem.removeClass(config.activeClass); 

      var nextItem = elem.next(); 
      nextItem.addClass(config.activeClass); 
      visible = nextItem; 
     } 

     function setPrevActive(elem) { 
      elem.removeClass(config.activeClass); 

      var prevItem = elem.prev(); 
      prevItem.addClass(config.activeClass); 
      visible = prevItem; 
     } 

     // initialize every element 
     this.each(function() { 
      Init($(this)); 
     }); 

     return this; 
    }; 

    $('#officers-slider').officersSlider({ 
     delay: 3000 
    }); 
})(jQuery); 

Answer 1

嘗試增加包裝div的高度。