帶按鈕和“ width：auto”列表的水平滾動UL

Question

就像標題所示，我試圖用<li>創建一個水平可滾動的<ul> ，它的width:auto ，上一個和下一個是按鈕，顯然是用overflow:hidden 。 關於如何使用jquery進行管理的任何建議？ 這是我准備的代碼...

的jsfiddle

HTML：

<div id="wrapper">
  <span class="arrow">&lt;</span>
  <span class="arrow">&gt;</span>
  <ul id="nav">
    <li>Abbaiare</li>
    <li>Bolle</li>
    <li>Cantante</li>
    <li>Domodossola</li>
    <li>Elefante</li>
    <li>Giovanni</li>
    <li>Hotel</li>
    <li>Inti</li>
    <li>Montagna</li>
    <li>Nave</li>
  </ul>
</div>

CSS：

* {
  margin:0;
  padding:0;
}
#wrapper {
  width:calc(100% - 120px);
  height:60px;
  background-color:#dbdbdb;
  padding:0 60px;
  margin-top:60px;
  font-family:helvetica;
  overflow:hidden;
  position:relative;
  z-index:99; 
}
.arrow {
  display:block;
  width:60px;
  height:60px;
  line-height:60px;
  text-align:center;
  background-color:#cccccc;
  font-weight:bold;
  cursor:pointer;
  position:absolute;
  top:0;
  z-index:101;
}
.arrow:first-of-type {
  left:0;
}
.arrow:nth-of-type(2) {
  right:0; 
}
#nav {
  width:auto;
  height:60px;
  overflow:hidden;
  list-style-type:none;
  white-space:nowrap;
  transition:2.0s;
}
#nav li {
  display:inline-block;
  height:60px;
  line-height:60px;
  font-size:13px;
  padding:0 30px;
}

Answer 1

您可以簡單地使用bxSlider而無需重新發明輪子。 為了使您的代碼正常工作，您只需要添加：

 $(function () { $('#nav').bxSlider({ pager: false, minSlides: 3, maxSlides: 3, slideWidth: 150, slideMargin: 25 }); }); 

 #wrapper { margin: auto; } .bx-viewport { height: 50px !important; padding: 0 30px; box-sizing: border-box; text-align: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/vendor/jquery.easing.1.3.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/vendor/jquery.fitvids.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css" /> <div id="wrapper"> <ul id="nav"> <li>Abbaiare</li> <li>Bolle</li> <li>Cantante</li> <li>Domodossola</li> <li>Elefante</li> <li>Giovanni</li> <li>Hotel</li> <li>Inti</li> <li>Montagna</li> <li>Nave</li> </ul> </div> 

Answer 2

希望對任何人都有用，這就是我所需要的...（謝謝Praveen Kumar）

的jsfiddle

$(".arrow:first-of-type").click(function() {
        var navwidth = $("#nav");
        navwidth.animate( { scrollLeft: '-=200' }, 1000);
    }
);
$(".arrow:nth-of-type(2)").click(function() {
        var navwidth = $("#nav");
        navwidth.animate( { scrollLeft: '+=200' }, 1000);
    }
);