j轮播垂直滚动不起作用
jCarousel vertical scrolling not working
$(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 检查器,它正在应用top
和left
样式,但没有任何移动。那是因为样式应用于ul
但它需要position: relative
。现在你需要玩你的身高和东西,因为它滚动以获得你想要的效果,但现在你应该开始看到期望。
编辑:对不起,我错过了你明确表示你已经看到了正在应用的样式。无论哪种方式添加上述CSS,它都应该开始工作。
相关文章:
- 使用绝对位置时,jQuery向左滚动不起作用
- 窗口滚动不起作用
- 多次滚动不起作用
- Jquery“平滑滚动”不起作用
- ExtJS:无限滚动不起作用
- 平滑滚动不起作用
- JS页面滚动不起作用
- 平滑滚动不起作用并阻止菜单链接
- j轮播自动滚动不起作用,没有错误
- 无限滚动不起作用
- 溢出:滚动不起作用
- jQuery matchHeight 维护滚动不起作用
- j查询单页滚动不起作用
- j轮播垂直滚动不起作用
- ExtJS 6树面板滚动不起作用
- 滚动不起作用
- jquery滚动不起作用
- jQuery滚动不起作用
- skrollr:水平滚动,平滑滚动不起作用
- Angular:在砌体中使用ngInclude时,无限滚动不起作用