JS图像滑块/轮播显示5个项目而不是1个

Question

我有一个JS图像滑块，当前显示一个项目，然后垂直移动。我想改变它，所以它一次显示5个项目并水平移动，但我无法确定是否需要更改JS或CSS。

我已经尝试调整每个项目的宽度并使它们显示：inline-block但它并没有什么区别。

<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);