My Bootstrap carousel are not giving the slides-CodePudding

I copied a Bootstrap carousel code to understand how it works but the code isn't giving me the desired result. The slides aren't moving.The first slide is just stagnant. Please what do you reccommend I do? Here are the html and css codes. I also included a screenshot of it for more clarification.

html

  <div >
    <div  style="background-color: red;">
        <img src="..."  alt="First slide">
    </div>
    <div  style="background-color: yellow;">
      <img src="..."  alt="Second slide">
    </div>
    <div  style="background-color: purple;">
      <img src="..."  alt="Third slide">
    </div>
  </div>
</div>

css

.carousel-item {
    height: 500px;   
}

Snippet of my html and css codes

CodePudding user response：

You need to have the proper parent with the appropriate id and data-ride that correlates with Bootstrap. Then you need to add the relative JS and CSS for Bootstrap 4.

.carousel-item {
  height: 500px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">


<div id="carouselExampleSlidesOnly"  data-ride="carousel">
  <div >
    <div  style="background-color: red;">
      <img src="..."  alt="First slide">
    </div>
    <div  style="background-color: yellow;">
      <img src="..."  alt="Second slide">
    </div>
    <div  style="background-color: purple;">
      <img src="..."  alt="Third slide">
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

CodePudding user response：

Add this code inside "head" tag of your .html file.

Why do you need to add this? The answer is whenever you are using a 3rd party library either you need to install it in your project or use its CDN to make it work.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>