Example : http://www.net-a-porter.com/product/163606
So far my code:
<style type="text/css">
li {float:left;height:50px}
</style>
<div style="height:100px">
<a href="#" class="top">up</a>
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
<li>Product 4</li>
<li>Product 5</li>
<li>Product 6</li>
</ul>
<a href="#" class="down">down</a>
</div>
您可以将内部UL贴在带有overflow:hidden的div内,然后上下移动内部UL的位置,从而创建一种滚动效果。
@Shai. Do you know why this is not working. I am finding out if there is more than three LI than show arrows. Otherwise do not show arrows:
jQuery(document).ready(function() {
var ulx;
var totalli;
ulx = document.getElementById("mycarousel");
totali = ulx.children.length;
if (totali > 3){
$(".jcarousel-next").hide();
$(".jcarousel-prev").hide();
}else{
// buttons appear
}
jQuery('#mycarousel').jcarousel({
vertical: true,
scroll: 2
});
});
UPDATED - Solution:
jQuery(document).ready(function() {
var ulx = document.getElementById("mycarousel");
var totalli = ulx.children.length;
if (totalli > 3) {
jQuery('#mycarousel').jcarousel({vertical:true,scroll:2});
} else {
jQuery('#mycarousel').jcarousel({vertical:true,scroll:2});
$(".jcarousel-next").hide();$(".jcarousel-prev").hide();
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.