我尝试更改jcarousel的大小以适应我的照片大小。 当我更改大小时,插件的箭头无法正常工作。 上一个箭头无法正常工作。
<head>
<meta charset="utf-8">
<title>Connected Carousels - jCarousel Examples</title>
<link rel="stylesheet" type="text/css" href="~/jcarousel.connected-carousels.css">
<script type="text/javascript" src="~/Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript" src="~/dist/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="~/jcarousel.connected-carousels.js"></script>
<script>
$('.jcarousel').jcarousel({
vertical: true
});
</script>
</head>
<body>
<div class="wrapper">
<div class="connected-carousels">
<div class="stage" style="position: relative;width: 250px;">
<div class="carousel carousel-stage" style="position: relative;width: 250px;">
<ul>
<li style="float: left; width: 250px;"><img src="~/images/books/book1.jpg" width="250" height="390" alt=""></li>
<li style="float: left; width: 250px;"><img src="~/images/books/book2.jpg" width="250" height="390" alt=""></li>
<li style="float: left; width: 250px;"><img src="~/images/books/book3.jpg" width="250" height="390" alt=""></li>
<li style="float: left; width: 250px;"><img src="~/images/books/book4.jpg" width="250" height="390" alt=""></li>
</ul>
</div>
<a href="#" class="prev prev-stage"><span>‹</span></a>
<a href="#" class="next next-stage"><span>›</span></a>
</div>
<div class="navigation">
<a href="#" class="prev prev-navigation">‹</a>
<a href="#" class="next next-navigation">›</a>
<div class="carousel carousel-navigation">
<ul>
<li><img src="~/images/books/book1_thumb.jpg" width="50" height="75" alt=""></li>
<li><img src="~/images/books/book2_thumb.jpg" width="50" height="75" alt=""></li>
<li><img src="~/images/books/book3_thumb.jpg" width="50" height="75" alt=""></li>
<li><img src="~/images/books/book4_thumb.jpg" width="50" height="75" alt=""></li>
</ul>
</div>
</div>
</div>
</div>
</body>
谢谢,Idan