Bootstrap 4 beta vertical carousel with previous and next carousel control buttons

[mlegg]

EDIT: It's solved. I forgot jquery

I tried to modify the code of my working vertical carousel to add a previous and next button under the slider, It seems to have messed things up, It looks like the below image, how I want it to appear. How can I fix this? I am trying allow the user to be able to control the scroll of the quotes.

<div class="container">
  <div class="row">
    <div class="col">
      <div id="carousel-pager" class="carousel vert slide " data-ride="carousel" data-interval="1000"> 
        
        <!-- Carousel items -->
        
        <div class="carousel-inner vertical">
          <div class="active  carousel-item item">
            <blockquote class="blockquote">
              <p>In A Very Short Period of Time Our Level of Guest Service & Professionalism Has Dramatically Improved...You Built A Much Stronger And Confident Team.</p>
              <footer class="blockquote-footer"><cite>Lynn W. Smith, General Manager<br>
                Smuggler's Inn</cite></footer>
            </blockquote>
          </div>
          <div class=" carousel-item item">
            <blockquote class="blockquote">
              <p>"I can still remember some of Pete's lessons years later!   He was inspiring & he knew what he was talking about. I also felt he was genuine.  He seemed to really care about our getting better."</p>
              <footer class="blockquote-footer"><cite>Vern Stone, Sr., Transportation & Valet Services<br>
                Lake of the Tourches Resort Casino</cite></footer>
            </blockquote>
          </div>
          <div class=" carousel-item item">
            <blockquote class="blockquote">
              <p>Peter Scott's Programs Are All About Content & Core Values.</p>
              <footer class="blockquote-footer"><cite>Dr. Thomas Dullien, Executive Director Human Resources & HR Development<br>
                Barona Resort & Casino</cite></footer>
            </blockquote>
          </div>
          <div class=" carousel-item item">
            <blockquote class="blockquote">
              <p>Peter Scott's Programs Are All About Content & Core Values.</p>
              <footer class="blockquote-footer"><cite>Dr. Thomas Dullien, Executive Director Human Resources & HR Development<br>
                Barona Resort & Casino</cite></footer>
            </blockquote>
          </div>
        </div>
        <div class=" carousel-item item">
          <blockquote class="blockquote">
            <p>I Was Skeptical About This Experiential Training, But It Was Phenomenal!</p>
            <footer class="blockquote-footer"><cite>Ana Zysko, Director of Training<br>
              Inn Of The Mountain Gods Resort & Casino</cite></footer>
          </blockquote>
        </div>
        <div class=" carousel-item item">
          <blockquote class="blockquote">
            <p>Your Customer Service Training On November 11, 2003, Was One Of The Best Training Events I Have Ever Experienced!</p>
            <footer class="blockquote-footer"><cite>Robert Taschetta, Help Desk Manager<br>
              Best Western International</cite></footer>
          </blockquote>
        </div>
        <div class=" carousel-item item">
          <blockquote class="blockquote">
            <p>It Was One Of The Best Trainings I've Ever Seen.  Our Gaming Board Attended A Session And Just Loved It!</p>
            <footer class="blockquote-footer"><cite>Marcus Diaz, Director of Training<br>
              Casino Del Sol</cite></footer>
          </blockquote>
        </div>
        <div class=" carousel-item item">
          <blockquote class="blockquote">
            <p>Several Commented On How Mr. Scott Conveyed A Sense of Understanding And Genuine Desire To Provide Them With Concrete And Realistic Answers To The Questions And Concerns.</p>
            <footer class="blockquote-footer"><cite>Maria Meza, Training & Development Manager<br>
              Tohono O'odham Gaming Authority</cite></footer>
          </blockquote>
        </div>
        <div class=" carousel-item item">
          <blockquote class="blockquote">
            <p>Since Our Seminar, Our Management Team Has Taken More Responsibility In Working With All New Hires.</p>
            <footer class="blockquote-footer"><cite>Dominic R. Palmiers, CEO<br>
              Odyssey Foods, LLC</cite></footer>
          </blockquote>
        </div>
        <div class=" carousel-item item">
          <blockquote class="blockquote">
            <p>&quot;Our Most Concise Training To Date!</p>
            <footer class="blockquote-footer"><cite>John Comeau<br>
              Mohegan Sun Casino</cite></footer>
          </blockquote>
        </div>
      </div>
<section class="carousel slide" data-ride="carousel" id="postsCarousel">
    <div class="container">
        <div class="row ">
           <div class="col-xs-12 mx-auto mb-3">
           <a class="left carousel-control btn btn-outline-secondary prev" href="#carousel-pager" data-slide="prev">
           <i class="fa fa-lg fa-chevron-up"></i> Previous Quote<span class="sr-only">Previous Quote</span></a>
           <a class="right carousel-control btn btn-outline-secondary next" href="#carousel-pager" data-slide="next">
           <i class="fa fa-lg fa-chevron-down"></i> Next Quote<span class="sr-only">Next Quote</span></a>
            </div></div></div>
</section>
</div>

.vert .carousel-item-next.carousel-item-left,
.vert .carousel-item-prev.carousel-item-right {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}
.vert .carousel-item-next,
.vert .active.carousel-item-right {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100% 0);
}

.vert .carousel-item-prev,
.vert .active.carousel-item-left {
-webkit-transform: translate3d(0,-100%, 0);
        transform: translate3d(0,-100%, 0);
}

$('.carousel .vertical .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
});;