Results 1 to 1 of 1

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

  1. #1
    Junior Member
    Join Date
    Mar 2017
    Posts
    22

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

    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.



    HTML Code:
    <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>
    Code:
    .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);
    }
    Code:
    $('.carousel .vertical .item').each(function(){
      var next = $(this).next();
      if (!next.length) {
        next = $(this).siblings(':first');
      }
    });;
    Attached Images Attached Images
    Last edited by mlegg; 11-13-2017 at 12:51 AM.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •