Question

任何人都可以帮我安排箭头和子弹导航（或者将其更改为缩略图）

我的旋转木马过渡是垂直的，我希望我的箭头和子弹导航也变得垂直，我的标记和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>

请任何人都可以帮助我或任何建议

感谢您提前：）

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;
}

Here是演示草稿。

垂直Bootstrap Carousel箭头和导航列表

1 个答案: