I would like to use 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 I found on the internet, changed the class names but with no succes. Anyone who can help me out?
<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>
Just have to change the id of the carousel inside the js, and perform some change on class names
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();
}
});