Bootstrap 4 beta vertical carousel

Bootstrap 4 beta vertical carousel
0

#1

I am trying to use a vertical carousel that I saw an example of here. That one is using images, but I only want to scroll text. I tried the following code but the carousel doesn’t scroll, I only see the text below my section of logos with the light yellow background. How can I make this scroll the quotes rather than just show them all the way it is? This is the live test page.
EDIT: I only want one quote to show and then have the net one scroll up and so on.

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

<div class="container">
<div class="row">
<div class="col">
<div id="carousel-pager" class="carousel vert slide " data-ride="carousel" data-interval="6000"> 
<!-- Carousel items -->
<div class="carousel-inner vertical">
          <div class="active  carousel-item item">
            <blockquote class="blockquote">
              <p><i class="fa fa-quote-left" aria-hidden="true"></i> In A Very Short Period of Time Our Level of Guest Service & Professionalism Has Dramatically Improved...You Built A Much Stronger And Confident Team. <i class="fa fa-quote-right" aria-hidden="true"></i></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 class="fa fa-quote-left" aria-hidden="true"></i> 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. <i class="fa fa-quote-right" aria-hidden="true"></i></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><i class="fa fa-quote-left" aria-hidden="true"></i> Peter Scott's Programs Are All About Content & Core Values. <i class="fa fa-quote-right" aria-hidden="true"></i></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><i class="fa fa-quote-left" aria-hidden="true"></i> Peter Scott's Programs Are All About Content & Core Values. <i class="fa fa-quote-right" aria-hidden="true"></i></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 class="fa fa-quote-left" aria-hidden="true"></i> I Was Skeptical About This Experiential Training, But It Was Phenomenal! <i class="fa fa-quote-right" aria-hidden="true"></i></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><i class="fa fa-quote-left" aria-hidden="true"></i> Your Customer Service Training On November 11, 2003, Was One Of The Best Training Events I Have Ever Experienced! <i class="fa fa-quote-right" aria-hidden="true"></i></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><i class="fa fa-quote-left" aria-hidden="true"></i> It Was One Of The Best Trainings I've Ever Seen.  Our Gaming Board Attended A Session And Just Loved It! <i class="fa fa-quote-right" aria-hidden="true"></i></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><i class="fa fa-quote-left" aria-hidden="true"></i> 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. <i class="fa fa-quote-right" aria-hidden="true"></i></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><i class="fa fa-quote-left" aria-hidden="true"></i> Since Our Seminar, Our Management Team Has Taken More Responsibility In Working With All New Hires. <i class="fa fa-quote-right" aria-hidden="true"></i></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><i class="fa fa-quote-left" aria-hidden="true"></i> Our Most Concise Training To Date! <i class="fa fa-quote-right" aria-hidden="true"></i></p>
            <footer class="blockquote-footer"><cite>John Comeau<br>
              Mohegan Sun Casino</cite></footer>
          </blockquote>
</div></div>
<!-- Controls --> 
<a class="left carousel-control" href="#carousel-pager" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-pager" role="button" data-slide="next"> <span class="chevron-circle-down" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div></div></div>
$('.carousel .vertical .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));
  
  for (var i=1;i<2;i++) {
    next=next.next();
    if (!next.length) {
    	next = $(this).siblings(':first');
  	}
    
    next.children(':first-child').clone().appendTo($(this));
  }
});

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

#3

I tried to modify the code to add a previous and next button under the slider, It seems to have messed things up, It looks like how I want it to appear. How can I fix this?

<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');
  }
  next.children(':first-child').clone().appendTo($(this));
  
  for (var i=1;i<2;i++) {
    next=next.next();
    if (!next.length) {
    	next = $(this).siblings(':first');
  	}
    
    next.children(':first-child').clone().appendTo($(this));
  }
});


#4

or should I make this a new separate question?