CODEWITHSUNDEEP
htmlcssbootstrap-4
QueGreen
QueGreen

Reputation: 21

Why is my Bootstrap 4 Carousel is not working on Codeply?

Here is the carousel I am working on in Codeply. The slide will not advance or (slide) to the next slide, it remains fixed on the first yellow slide. I try to preview it, same thing or color & alt text don't even show.

Please help..

Code Screenshot

\

PLEASE NOTE: I am taking the Angela Yu Web Dev Bootcamp via Udemy & all is going well except for an issue I am experiencing when attempting to follow along with her Bootstrap Carousel.

What I think the issue could be:

  1. I'm overlooking something small (extra div, missed tag, etc)

  2. Wrong Bootstrap used in Codeply settings

  3. Angela Yu video is slightly out of date (somethings have changed & the bootstrap she was using maybe diff now)

Upvotes: 1

Views: 911

Answers (3)

Rohit Pai
Rohit Pai

Reputation: 1

  1. Use latest version of Bootstrap 5 i.e. 5.1.3
  2. Change data-interval to data-bs-interval (it was changed after Bootstrap 4)
  3. No need to put semicolon after the colors inside style ="background-color: green;"

Upvotes: 0

Ajo Mathew
Ajo Mathew

Reputation: 111

Today on 18-June- 2022 while learning the same course, I have observed that the issue still persists.

After some research, when I have changed bootstrap version to Bootstrap 4.6.0, Carousel started working fine.

HTML

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" data-interval="1000">
    <div class="carousel-inner">
        <div class="carousel-item active" style="background-color: green;">
            <img class="d-block w-100" src="..." alt="First slide">
        </div>
        <div class="carousel-item" style="background-color: blue;">
            <img class="d-block w-100" src="..." alt="Second slide">
        </div>
        <div class="carousel-item" style="background-color: yellow;">
            <img class="d-block w-100" src="..." alt="Third slide">
        </div>
    </div>
</div>

CSS

.carousel-item {
    height:500px;
}

Frameworks

Bootstrap 4.6.0

Upvotes: 0

minha
minha

Reputation: 11

I had the same issue as well. I switched codeply bootstrap from 4 to 5 and it worked

Upvotes: 1

Related Questions