轮播不适用于bootstrap v4

Question

I am working on a web project and facing problem with carousel, its not moving to next image by clicking or even automatically. Following is my code :

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div id="carousel-testimonial" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-testimonial" data-slide-to="0" class="active"></li> <li data-target="#carousel-testimonial" data-slide-to="1"></li> <li data-target="#carousel-testimonial" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active text-center"> <img src="images/client-01.jpg" alt="testimonial" class="center-block"> <div class="testimonial-caption"> <h2>Danial</h2> <h4><span>Sr. Software Engineer, </span>Blue Gyms</h4> <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip."</p> </div> </div> <div class="carousel-item text-center"> <img src="images/client-02.jpg" alt="testimonial" class="center-block"> <div class="testimonial-caption"> <h2>Rauls Pole</h2> <h4><span>Marketing Manager, </span>Risco</h4> <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip."</p> </div> </div> <div class="carousel-item text-center"> <img src="images/client-03.jpg" alt="testimonial" class="center-block"> <div class="testimonial-caption"> <h2>Jack</h2> <h4><span>Sr. Software Engineer, </span>Blue Gyms</h4> <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip."</p> </div> </div> </div> </div> 

Answer 1

You forgot to include the buttons into your carousel. These are the a-links at the end of the following example. Furthermore, have you included jQuery and the Bootstrap 4 JavsScripts in your project? You find all necessary lines here .

<div id="carousel-testimonial" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-testimonial" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-testimonial" data-slide-to="1"></li>
        <li data-target="#carousel-testimonial" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active text-center">
            <img src="images/client-01.jpg" alt="testimonial" class="center-block">
            <div class="testimonial-caption">
                <h2>Danial</h2>
                <h4><span>Sr. Software Engineer, </span>Blue Gyms</h4>
                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                    et olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquip."</p>
            </div>
        </div>
        <div class="carousel-item text-center">
            <img src="images/client-02.jpg" alt="testimonial" class="center-block">
            <div class="testimonial-caption">
                <h2>Rauls Pole</h2>
                <h4><span>Marketing Manager, </span>Risco</h4>
                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                    et olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquip."</p>
            </div>
        </div>
        <div class="carousel-item text-center">
            <img src="images/client-03.jpg" alt="testimonial" class="center-block">
            <div class="testimonial-caption">
                <h2>Jack</h2>
                <h4><span>Sr. Software Engineer, </span>Blue Gyms</h4>
                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                    et olore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquip."</p>
            </div>
        </div>
        <a class="carousel-control-prev" href="#carousel-testimonial" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carousel-testimonial" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>