项目基础水平滚动菜单栏

Question

我想在Bootstrap菜单中创建项目基础水平滚动菜单栏。当窗口很小时，我有一个Java脚本代码可以水平滚动菜单。但问题是

<nav class="navbar navbar-inverse event_nav menu_mobile">
      <div class="container-fluid">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>                        
              </button>
            </div>

            <div class="collapse navbar-collapse" id="myNavbar">
              <ul class="nav navbar-nav">
                <li class = "<?php if($currentPage =='event_detail'){echo 'active';}?>">
                        <a href="event_detail.php">Event Details</a>
                </li>
                <li class = "<?php if($currentPage =='spk'){echo 'active';}?>">
                    <a href="spk.php">Speakers</a>
                </li>
                <li class = "<?php if($currentPage =='partner'){echo 'active';}?>">
                    <a href="partner.php">Partners</a>
                </li>
                <li class = "<?php if($currentPage =='venu'){echo 'active';}?>">
                    <a href="venu.php">Venue</a>
                </li>
                <li class = "<?php if($currentPage =='Agenda'){echo 'active';}?>">
                    <a href="agenda.php">Agenda</a>
                </li>
                <li class = "<?php if($currentPage =='S_media'){echo 'active';}?>">
                    <a href="s_media.php">Social Media</a>
                </li>
                <li class = "<?php if($currentPage =='Features'){echo 'active';}?>">
                    <a href="features.php">Features</a>
                </li>
                <!--<li class = "<?php if($currentPage ==''){echo 'active';}?>">
                    <a href="#">Event Logistic</a>
                </li>-->
                <li class = "<?php if($currentPage =='Exibition'){echo 'active';}?>">
                    <a href="exibition.php">Exibition</a>
                </li>
                <li class = "<?php if($currentPage =='Contact'){echo 'active';}?>">
                    <a href="contact.php">Contact Us</a>
                </li>
                <li class = "<?php if($currentPage =='presentation'){echo 'active';}?>">
                    <a href="presentation.php">Presentations</a>
                </li>
                <li class = "<?php if($currentPage =='email&tracking'){echo 'active';}?>">
                    <a href="email_track.php">Email & Tracking</a>
                </li>
                <li class = "<?php if($currentPage =='Additional'){echo 'active';}?>">
                    <a href="additional.php">Additional Pages</a>
                </li>
                <li class = "<?php if($currentPage =='menu'){echo 'active';}?>">
                    <a href="create_menu.php">Menu</a>
                </li>
                <li class = "<?php if($currentPage =='booking'){echo 'active';}?>">
                    <a href="booking.php">Bookings</a>
                </li>
                <li class = "<?php if($currentPage =='design'){echo 'active';}?>">
                    <a href="design.php">Design</a>
                </li>
              </ul>
            </div>
      </div>
    </nav>

var hidWidth;
    var scrollBarWidths = 40;

    var widthOfList = function(){
      var itemsWidth = 0;
      $('.list li').each(function(){
        var itemWidth = $(this).outerWidth();
        itemsWidth+=itemWidth;
      });
      return itemsWidth;
    };

    var widthOfHidden = function(){
      return (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi())-scrollBarWidths;
    };

    var getLeftPosi = function(){
      return $('.list').position().left;
    };

    var reAdjust = function(){
      if (($('.wrapper').outerWidth()) < widthOfList()) {
        $('.scroller-right').show();
      }
      else {
        $('.scroller-right').hide();
      }

      if (getLeftPosi()<0) {
        $('.scroller-left').show();
      }
      else {
        $('.item').animate({left:"-="+getLeftPosi()+"px"},'slow');
        $('.scroller-left').hide();
      }
    }

    reAdjust();

    $(window).on('resize',function(e){  
        reAdjust();
    });

    $('.scroller-right').click(function() {

      $('.scroller-left').fadeIn('slow');
      $('.scroller-right').fadeOut('slow');

      $('.list').animate({left:"+="+widthOfHidden()+"px"},'slow',function(){

      });
    });

    $('.scroller-left').click(function() {

        $('.scroller-right').fadeIn('slow');
        $('.scroller-left').fadeOut('slow');

        $('.list').animate({left:"-="+getLeftPosi()+"px"},'slow',function(){

        });
    });    

我想以正确的方式滚动菜单。当我添加了很多li项目而不是滚动菜单按钮时，请单击它，以便转到最后一项并跳过所有中心项目。