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

Answer 1

它没有滚动，因为你错过了这个 CSS:

.jcarousel ul {
    position: relative;
}

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

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

jCarousel 垂直滚动不起作用

jCarousel vertical scrolling not working

javascript

jquery

html

css

jcarousel