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