如何在此垂直轮播中的第一个和最后一个项目上隐藏 bootstrap 3 个轮播箭头？

Question

我想使用我在互联网上找到的 https://codepen.io/danbhala/pen/eNZrQW vertical carousel slider. Only piece of code I am missing is the arrows that hide on first and last item. I tried to extend it with https://www.bootply.com/99354，更改了 class 名称但没有成功。谁能帮帮我？

<body class="bg-grey-two" data-animated-bg="#f8f8f8:20-#eeeeee">
   <div class="container">
  <div class="page-header">
    <h1>Bootstrap Vertical Carousel</h1>
    <p class="lead">Out of the box, Bootstrap only comes with a traditional horizontal  carousel. This Pen has the HTML and CSS to get it to animate vertically with up/down carousel controls.</p>
  </div>
</div>

<div class="bg-info">
  <div class="container">
    <div id="carousel-example-vertical" class="carousel vertical slide" data-interval="false" Use data-wrap="false">
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <p class="ticker-headline">
            <a href="#">
              <strong>Article Headline 1</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras luctus eu odio fermentum tempus. Aliquam erat volutpat. Etiam arcu urna, lacinia sed dapibus sed, molestie ac mi.
            </a>
          </p>
        </div>
        <div class="item">
          <p class="ticker-headline">
            <a href="#">
              <strong>Article Headline 2</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras luctus eu odio fermentum tempus. Aliquam erat volutpat. Etiam arcu urna, lacinia sed dapibus sed, molestie ac mi.
            </a>
          </p>
        </div>
        <div class="item">
          <p class="ticker-headline">
            <a href="#">
              <strong>Article Headline 3</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras luctus eu odio fermentum tempus. Aliquam erat volutpat. Etiam arcu urna, lacinia sed dapibus sed, molestie ac mi.
            </a>
          </p>
        </div>
        <div class="item">
          <p class="ticker-headline">
            <a href="#">
              <strong>Article Headline 4</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras luctus eu odio fermentum tempus. Aliquam erat volutpat. Etiam arcu urna, lacinia sed dapibus sed, molestie ac mi.
            </a>
          </p>
        </div>
        <div class="item">
          <p class="ticker-headline">
            <a href="#">
              <strong>Article Headline 5</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras luctus eu odio fermentum tempus. Aliquam erat volutpat. Etiam arcu urna, lacinia sed dapibus sed, molestie ac mi.
            </a>
          </p>
        </div>
      </div>

      <!-- Controls -->
      <a class="up carousel-control" href="#carousel-example-vertical" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="down carousel-control" href="#carousel-example-vertical" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</div>

Answer 1

只需更改 js 中轮播的 id，并对 class 名称进行一些更改

JS:

$('#carousel-example-vertical').on('slid', '', function() {
  var $this = $(this);

  if($('.carousel-inner .item:first').hasClass('active')) {
    $('.up.carousel-control').hide();
  } else if($('.carousel-inner .item:last').hasClass('active')) {
    $('.down.carousel-control').hide();
  } else {
    $this.children('.carousel-control').show();
  }    
});

如何在此垂直轮播中的第一个和最后一个项目上隐藏 bootstrap 3 个轮播箭头？

How can I hide bootstrap 3 carousel arrows on first and last item fro this vertical carousel?

arrows

carousel

twitter-bootstrap-3