Issues with Bootstrap Carousel (image shows but doesn't slide/change)

Question

I'll preface this by saying I really don't have much experience in this, but I've looked through documentations and solutions that helped others and I've yet to fix my issue so I'll go ahead and make my own post.

<div id="randomCarousel" class="carousel slide" data-ride="carousel">

    <!--Indicator Buttons-->
    <ol class="carousel-indicators">
        <li data-target="#randomCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#randomCarousel" data-slide-to="1"></li>
        <li data-target="#randomCarousel" data-slide-to="2"></li>
    </ol>

    <!--Carousel w/Images-->
    <div class="container">
        <div class="carousel-inner">

            <!--ALL PICS ARE PART OF CREATIVE COMMONS; ADDED SIMPLY FOR FUN-->
            <div class="carousel-item active">
                <img src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="First">
            </div>

            <div class="carousel-item">
                <img src="https://images.pexels.com/photos/2283759/pexels-photo-2283759.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="Second">
            </div>

            <div class="carousel-item">
                <img src="https://images.pexels.com/photos/2283759/pexels-photo-2283759.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="Third">
            </div>

        </div>
    </div>

    <!--Next and Previous buttons-->
    <a class="carousel-control-prev" href="#randomCarousel" 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="#randomCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>

</div>

I've gone ahead and added scripts and links found on the bootstrap website also but to no avail. Any additional feedback would also be greatly appreciated.

Answer 1

Your code is working fine, may be you forgot to include bootstrap library files (CSS and JS) or may be forgot to include js library file. Not sure exactly what you are missing.

Here is the working example of your code.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div id="randomCarousel" class="carousel slide" data-ride="carousel">

    <!--Indicator Buttons-->
    <ol class="carousel-indicators">
        <li data-target="#randomCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#randomCarousel" data-slide-to="1"></li>
        <li data-target="#randomCarousel" data-slide-to="2"></li>
    </ol>

    <!--Carousel w/Images-->
    <div class="container">
        <div class="carousel-inner">

            <!--ALL PICS ARE PART OF CREATIVE COMMONS; ADDED SIMPLY FOR FUN-->
            <div class="carousel-item active">
                <img src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="First">
            </div>

            <div class="carousel-item">
                <img src="https://images.pexels.com/photos/2283759/pexels-photo-2283759.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="Second">
            </div>

            <div class="carousel-item">
                <img src="https://images.pexels.com/photos/2283759/pexels-photo-2283759.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="Third">
            </div>

        </div>
    </div>

    <!--Next and Previous buttons-->
    <a class="carousel-control-prev" href="#randomCarousel" 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="#randomCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>

</div>

https://codepen.io/pgurav/pen/KKKxBwM

Answer 2

I'm not sure what is the issue with your code, But when i customize my code then it will worked. Please review my code and let me know further clarification.

Hope it will help

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>




<div id="carousel-indicators" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-indicators" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-indicators" data-slide-to="1"></li>
    <li data-target="#carousel-indicators" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
    <div class="container">
        <div class="carousel-inner">
    <div class="item active">
      <img src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="First">
    </div>

    <div class="item">
      <img src="https://images.pexels.com/photos/2283759/pexels-photo-2283759.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="Second">
    </div>

    <div class="item">
      <img src="https://images.pexels.com/photos/2283759/pexels-photo-2283759.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="Third">
            </div>
    </div>
  </div>
</div>

    <!--Next and Previous buttons-->
    <a class="carousel-control-prev" href="#randomCarousel" 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="#randomCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>