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