带有按钮和“宽度:自动"的水平滚动 UL列表 [英] Horizontal scrolling UL with buttons and "width:auto" lists

问题描述

正如标题所暗示的，我正在尝试使用

和 width:auto 创建一个可水平滚动的

并带有上一个和下一个按钮，显然带有 overflow:hidden.关于如何使用 jquery 管理它的任何建议?这是我准备好的代码...

JSFiddle

HTML:

<span class="箭头">&lt;</span><span class="箭头">&gt;</span><ul id="导航"><li>Abbaiare</li><li>Bolle</li><li>Cantante</li><li>多莫多索拉</li><li>Elefante</li><li>乔瓦尼</li><li>酒店</li><li>Inti</li><li>蒙塔尼亚</li><li>中殿</li>

CSS:

* {保证金:0;填充:0;}#包装{宽度:计算(100% - 120px)；高度:60px；背景色:#dbdbdb;填充:0 60px;边距顶部:60px;字体系列:黑体字；溢出:隐藏；位置:相对；z-索引:99；}.箭 {显示:块；宽度:60px；高度:60px；行高:60px；文字对齐:居中；背景颜色:#cccccc;字体粗细:粗体；游标:指针；位置:绝对；顶部:0;z-索引:101；}.arrow:第一个类型{左:0;}.arrow:nth-of-type(2) {右:0;}#导航{宽度:自动；高度:60px；溢出:隐藏；列表样式类型:无；空白:nowrap;过渡:2.0s；}#导航李{显示:内联块；高度:60px；行高:60px；字体大小:13px；填充:0 30px;}

解决方案

你可以简单地使用 bxSlider 无需重新发明轮子.要使您的代码正常工作，您只需添加:

$(function () {$('#nav').bxSlider({寻呼机:假，最小幻灯片:3，最大幻灯片:3，幻灯片宽度:150，滑动边距:25});});

#wrapper {保证金:自动；}.bx-视口{高度:50px！重要；填充:0 30px；box-sizing: 边框框；文本对齐:居中；}

<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="包装器"><ul id="导航"><li>Abbaiare</li><li>Bolle</li><li>Cantante</li><li>多莫多索拉</li><li>Elefante</li><li>乔瓦尼</li><li>酒店</li><li>Inti</li><li>蒙塔尼亚</li><li>中殿</li>

As the title suggests, I am trying to create a horizontal scrollable <ul> with <li> with width:auto and with prev and next buttons, clearly with overflow:hidden. Any suggestions on how to manage it with jquery? This is the code that I have prepared...

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

解决方案

You can simply use bxSlider without reinventing the wheel. To make your code work, you just need to add:

$(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>

这篇关于带有按钮和“宽度:自动"的水平滚动 UL列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！