水平滚动 UL 带按钮和"width:auto"列表

Question

正如标题所暗示的那样，我正在尝试创建一个水平可滚动<ul>，其中包含带有width:auto的<li>以及带有上一个和下一个按钮，显然带有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

希望它对任何人都有用， 这是我需要的... (谢谢普拉文·库马尔)

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