j轮播垂直滚动不起作用

jCarousel vertical scrolling not working

本文关键字:滚动 不起作用 垂直      更新时间:2023-09-26

$(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 容器在顶部位置显示计算出的样式更改,但轮播的内容不会滚动。请帮忙。这是旋转木马版本。这是我的Codepen。只需要这最后一块垂直滚动即可工作。

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

.jcarousel ul {
    position: relative;
}

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

编辑:对不起,我错过了你明确表示你已经看到了正在应用的样式。无论哪种方式添加上述CSS,它都应该开始工作。