Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/video/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Twitter bootstrap 3 如何在此垂直旋转木马的第一个和最后一个项目上隐藏引导3个旋转木马箭头?_Twitter Bootstrap 3_Carousel_Arrows - Fatal编程技术网

Twitter bootstrap 3 如何在此垂直旋转木马的第一个和最后一个项目上隐藏引导3个旋转木马箭头?

Twitter bootstrap 3 如何在此垂直旋转木马的第一个和最后一个项目上隐藏引导3个旋转木马箭头?,twitter-bootstrap-3,carousel,arrows,Twitter Bootstrap 3,Carousel,Arrows,我想使用垂直旋转滑块。我唯一缺少的代码是隐藏在第一项和最后一项上的箭头。我试图用我在互联网上找到的东西来扩展它,更改了类名,但没有成功。有人能帮我吗 <body class="bg-grey-two" data-animated-bg="#f8f8f8:20-#eeeeee"> <div class="container"> <div class="page-header"> <h1>Bootstrap Vertical Caro

我想使用垂直旋转滑块。我唯一缺少的代码是隐藏在第一项和最后一项上的箭头。我试图用我在互联网上找到的东西来扩展它,更改了类名,但没有成功。有人能帮我吗

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

自举垂直旋转木马

开箱即用,Bootstrap仅配有传统的水平旋转木马。此笔具有HTML和CSS,可以使用上/下旋转控制垂直设置动画


只需更改js中旋转木马的id,并对类名执行一些更改即可

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