javascript - jCarousel 垂直滚动不起作用

Question

$(function() {
 $('.jcarousel')
				.jcarousel({
					auto: 1,
					animation: {
						duration: 3000,
						easing:   'linear',
					},
					vertical: true,
					wrap: 'last'
			}).jcarouselAutoscroll({
					interval: 3000,
					target: '+=1',
					autostart: true
				});
});

ul li {
  list-style-type: none;
}

.jcarousel {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 88px;
}

.jcarousel li {
    float: left;
    width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jcarousel/0.3.4/jquery.jcarousel.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="jcarousel">
    <ul>
      <li>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.</li>
      <li>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.</li>
      <li>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.</li>
      <li>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.</li>
      <li>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.</li>
    </ul>
  </div>
</div>

ul 容器在顶部位置显示计算出的样式变化，但轮播的内容不滚动。请帮忙。这是jCarousel Version .这是我的 Codepen .只需要这最后一 block 垂直滚动即可工作。

Answer 1

它不滚动，因为你缺少这个 CSS:

.jcarousel ul {
    position: relative;
}

如果您查看 DOM 检查器，它正在应用 top 和 left 样式，但没有任何移动。那是因为样式应用于 ul 但它需要 position: relative。既然它滚动以获得您想要的效果，您将需要更多地调整您的高度和其他东西，但现在您应该开始看到预期的结果。

编辑:抱歉，我没有注意到您明确表示您已经看到样式已经被应用。无论哪种方式添加上面的 CSS，它应该开始工作。