3
嗨任何人都可以幫我安排的箭頭和子彈導航（或者將其更改爲縮略圖）垂直引導旋轉木馬箭頭和導航列表
我的旋轉木馬過渡是垂直的，我想我的箭和子彈導航成爲縱也我在這裏的標記和Fiddle Example
$('#BNYCarousel').bind('mousewheel', function(e) {
if (e.originalEvent.wheelDelta/120 > 0) {
$(this).carousel('next');
} else {
$(this).carousel('prev');
}
});<style> .carousel-inner.vertical {
height: 100%;
}
.carousel-inner.vertical > .item {
-webkit-transition: .6s ease-in-out top;
-o-transition: .6s ease-in-out top;
transition: .6s ease-in-out top;
}
@media all and (transform-3d),
(-webkit-transform-3d) {
.carousel-inner.vertical > .item {
-webkit-transition: -webkit-transform .6s ease-in-out;
-o-transition: -o-transform .6s ease-in-out;
transition: transform .6s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
}
.carousel-inner.vertical > .item.next,
.carousel-inner.vertical > .item.active.right {
top: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
.carousel-inner.vertical > .item.prev,
.carousel-inner.vertical > .item.active.left {
top: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
.carousel-inner.vertical > .item.next.left,
.carousel-inner.vertical > .item.prev.right,
.carousel-inner.vertical > .item.active {
top: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.carousel-inner.vertical > .active {
top: 0;
}
.carousel-inner.vertical > .next,
.carousel-inner.vertical > .prev {
top: 0;
height: 100%;
width: auto;
}
.carousel-inner.vertical > .next {
left: 0;
top: 100%;
}
.carousel-inner.vertical > .prev {
left: 0;
top: -100%
}
.carousel-inner.vertical > .next.left,
.carousel-inner.vertical > .prev.right {
top: 0;
}
.carousel-inner.vertical > .active.left {
left: 0;
top: -100%;
}
.carousel-inner.vertical > .active.right {
left: 0;
top: 100%;
}
</style><div style="width:100%; height:100%">
<!-- wrap @img width -->
<div id="BNYCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#BNYCarousel" data-slide-to="0" class="active"></li>
<li data-target="#BNYCarousel" data-slide-to="1"></li>
<li data-target="#BNYCarousel" data-slide-to="2"></li>
<li data-target="#BNYCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner vertical" role="listbox">
<div class="item active">
<img u="image" class="img-responsive" src="http://www.thehindu.com/multimedia/dynamic/02265/mamp03studio2_1__j_2265873g.jpg" alt="Alternate Text" height="100%" width="1500" />
</div>
<div class="item">
<img u="image" class="img-responsive" src="http://img.gettyimageslatam.com/public/userfiles/redesign/images/landing/home/img_entry_002.jpg" alt="Alternate Text" height="750" width="1500" />
</div>
<div class="item">
<img u="image" class="img-responsive" src="https://lh6.googleusercontent.com/-yt4z1GMVsTQ/VKQMhVKUlaI/AAAAAAAAAbg/uSKwpRzYQqA/w1600-h1200/Tiger%2B3D%2BWallpapers.jpg" alt="Alternate Text" height="750" width="1500" />
</div>
<div class="item">
<img u="image" class="img-responsive" src="http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg" alt="Alternate Text" height="750" width="1500" />
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#BNYCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#BNYCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>請任何人都可以幫我或任何建議
謝謝您的提前:)