I'm having a problem getting a bootstrap carousel to show within the web page

HTML & CSS
1

The code below used to work until I separated each file into its separate folder (for example …/bar/bar.html). Since doing this the carousel is still present when inspecting element, however nothing actually shows for it. I have tried using the updated version of bootstrap but it destroys the layout I have managed to get sorted so I intend to migrate it at a later date.

Here is my code for the carousel and accompanying script:

<div class="container-full">
    <div class="col-md-9 left">
        <div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="4000">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner">
            <div class="item active">
              <img src="images/IMG_0598_copy.JPG" alt="Image 1">
              <!-- <div class="carousel-caption">
                    <h1 class="text-color"> The Red Lion</h1>
                </div> -->
            </div>
            <div class="item">
              <img src="images/IMG_0604_copy.JPG" alt="Image 2">
            </div>
            <div class="item">
              <img src="images/IMG_0610_copy.JPG" alt="Image 3">
            </div>
          </div>

          <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>



<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Any advice would be apppreciated.

Thanks

2

You didn’t say which version of bootstrap you were using but I believe bootstrap4 uses .carousel-item rather than .item as you have shown in your code.


        <div class="carousel-item active"> <img src="images/IMG_0598_copy.JPG" alt="Image 1"></div>
        <div class="carousel-item"> <img src="images/IMG_0604_copy.JPG" alt="Image 2"> </div>
        <div class="carousel-item"> <img src="images/IMG_0610_copy.JPG" alt="Image 3"> </div>

The above works for me when linked to the bootstrap files.

3

Thank you! just been through it all and works fine now.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.