0

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>
BENARD Patrick
  • 30,363
  • 16
  • 99
  • 105
Hessel Kers
  • 21
  • 6

1 Answers1

0

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();
  }    
});
BENARD Patrick
  • 30,363
  • 16
  • 99
  • 105