CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Kieni Idumo
Kieni Idumo

Reputation: 13

My Bootstrap carousel are not giving the slides

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 class="carousel-inner">
    <div class="carousel-item active" style="background-color: red;">
        <img src="..." class="d-block w-100" alt="First slide">
    </div>
    <div class="carousel-item" style="background-color: yellow;">
      <img src="..." class="d-block w-100" alt="Second slide">
    </div>
    <div class="carousel-item" style="background-color: purple;">
      <img src="..." class="d-block w-100" alt="Third slide">
    </div>
  </div>
</div>

css

.carousel-item {
    height: 500px;   
}

Snippet of my html and css codes

Upvotes: 1

Views: 72

Answers (2)

Kameron
Kameron

Reputation: 10846

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" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" style="background-color: red;">
      <img src="..." class="d-block w-100" alt="First slide">
    </div>
    <div class="carousel-item" style="background-color: yellow;">
      <img src="..." class="d-block w-100" alt="Second slide">
    </div>
    <div class="carousel-item" style="background-color: purple;">
      <img src="..." class="d-block w-100" 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>

Upvotes: 1

Waleed Rafi
Waleed Rafi

Reputation: 26

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>

Upvotes: 0

Related Questions