垂直Bootstrap Carousel箭頭和導航列表

Question

任何人都可以幫我安排箭頭和子彈導航（或者可能更改為縮略圖）

我的旋轉木馬過渡是垂直的，我希望我的箭頭和子彈導航也變得垂直，這里我的標記和小提琴示例

 $('#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> 

請任何人都可以幫助我或任何建議

謝謝你提前:)

Answer 1

您應該調整HTML和CSS以獲得所需的結果。

HTML

 <a class="left carousel-control" href="#BNYCarousel" role="button" data-slide="prev">
     <span class="glyphicon glyphicon-chevron-up" 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-down" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
</a>

CSS

.carousel-indicators {
  bottom: 0;
  top: 30px;
  left: 0;
  right: auto;
  width: 20px;
  margin-left: 30px;
  text-align: center;  
}
.carousel-indicators li {
    float:none!important;
    display: block;
    margin-bottom: 10px;
}
.carousel-indicators li.active {
    margin-bottom:10px!important;
}

這是草案演示。