Someone can help me with this carousel?

HTML-CSS
1

I’m literally one entire day trying to search what is wrong with this, and I can’t. The images are show in the index but the buttons won’t work.

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<title>Júlio Moreira</title>

<meta name="description" content="" />

<meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="stylesheet" href="./css/bootstrap.min.css" />

<link rel="stylesheet" href="./css/main.css" />

<header class="row animated slideInRight text-white bg-info shadow">

  <div class="container p-4">

    <div class="col-12 mx-auto text-center">

      <img

        src="./img/icone.png"

        class="img-fluid mx-auto"

        id="icone"

      />

    </div>

    <div class="col-12 mx-auto mt-4">

      <nav class="navbar navbar-expand-lg navbar-light bg-info">

        <div class="container-fluid">

          <a class="navbar-brand" href="#">Início</a>

          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

            <span class="navbar-toggler-icon"></span>

          </button>

          <div class="collapse navbar-collapse" id="navbarNav">

            <ul class="navbar-nav">

              <li class="nav-item">

                <a class="nav-link active" aria-current="page" href="#">Quem Somos</a>

              </li>

              <li class="nav-item">

                <a class="nav-link" href="#">Onde Nos Achar</a>

              </li> 

              <li class="nav-item">

                <a class="nav-link" href="#">Contatos</a>

              </li>

            </ul>

          </div>

        </div>

      </nav>

  </div>

</header>

<!-- Section CARROSSEL. -->



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

  <ol class="carousel-indicators">

    <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>

    <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>

    <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li>

  </ol>

  <div class="carousel-inner">

    <div class="carousel-item active">

      <img src="./img/img1.jpg" class="d-block w-100" alt="...">

      <div class="carousel-caption d-none d-md-block">

        <h5>First slide label</h5>

        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>

      </div>

    </div>

    <div class="carousel-item">

      <img src="./img/img2.jpg" class="d-block w-100" alt="...">

      <div class="carousel-caption d-none d-md-block">

        <h5>Second slide label</h5>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

      </div>

    </div>

    <div class="carousel-item">

      <img src="./img/img3.jpg" class="d-block w-100" alt="...">

      <div class="carousel-caption d-none d-md-block">

        <h5>Third slide label</h5>

        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>

      </div>

    </div>

  </div>

  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev">

    <span class="carousel-control-prev-icon" aria-hidden="true"></span>

    <span class="visually-hidden">Previous</span>

  </a>

  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next">

    <span class="carousel-control-next-icon" aria-hidden="true"></span>

    <span class="visually-hidden">Next</span>

  </a>

</div>



<!--SOURCE JS-->

///// I really think the problem is about the jquery but It won’t work, i already try use a CDN but nothing worked, now I create an expecific .js to the jquery and put the code there.

2

Hey @dooguitryx!
Welcome to the Forum!

It would be helpful, If you have a link to your project.

3

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