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。只需要这一个最后一块垂直滚动即可工作。

Answer 1

它不滚动因为你错过了这个CSS：

.jcarousel ul {
    position: relative;
}

如果您查看DOM检查器，它正在应用top和left样式，但没有任何动态。这是因为样式应用于ul但需要position: relative。你需要玩高峰和更多东西，因为它滚动以获得你想要的效果，但现在你应该开始看到期望。

编辑：对不起我错过了你明确说明你已经看到了样式。无论哪种方式添加上面的CSS，它应该开始工作。

jCarousel垂直滚动不起作用

1 个答案: