1

Estoy haciendo paginación con Bootstrap (Todo esto para un curso), tengo prohibido usar javascript, solo el que ya tiene Bootstrap. Mezcle la función de carousell con paginación, para poder meter contenido y usar los deslizadores de paginación en las flechas de los costados. El problema es a la hora de usar el 1, 2 y 3. Como puedo hacer que cambie entre esos como con las flechas, osea en la misma página sin usar JS y sin tener que crear una copia del index y hacer que cambien entre ellos? Muchas Gracias.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>

  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner" role="listbox">

      <nav aria-label="Page navigation example">
        <ul class="pagination">
          <li class="page-item">
            <a class="page-link" href="#carouselExampleIndicators" role="button" data-slide="prev">
              <span aria-hidden="true">«</span>
              <span class="sr-only">Previous</span>
            </a>
          </li>
          <li class="page-item"><a class="page-link" href="#">1</a></li>
          <li class="page-item"><a class="page-link" href="#!">2</a></li>
          <li class="page-item"><a class="page-link" href="#!">3</a></li>
          <li class="page-item">
            <a class="page-link" href="#carouselExampleIndicators" role="button" data-slide="next">
              <span aria-hidden="true">»</span>
              <span class="sr-only">Next</span>
            </a>
          </li>
        </ul>
      </nav>

      <div class="carousel-item active">

        <div class="container">
          <div class="row">
            <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
              <div class="card">
                <img class="card-img-top" src="/images/pathToYourImage.png" alt="Card image cap">
                <div class="card-body">
                  <h4 class="card-title">Card title</h4>
                  <p class="card-text">
                    Someone quick example text to build on the card title
                    and make up the bulk of the card's content.
                  </p>
                  <a href="#!" class="btn btn-primary ">Go somewhere</a>
                  <a href="#!" class="btn btn-primary ">Go somewhere</a>
                </div>
              </div>
            </div>
            <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
              <div class="card">
                <img class="card-img-top" src="/images/pathToYourImage.png" alt="Card image cap">
                <div class="card-body">
                  <h4 class="card-title">Card title</h4>
                  <p class="card-text">
                    Some quick example text to build on the card title
                    and make up the bulk of the card's content.
                  </p>
                  <a href="#!" class="btn btn-primary ">Go somewhere</a>
                  <a href="#!" class="btn btn-primary ">Go somewhere</a>
                </div>
              </div>
            </div>
            <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
              <div class="card">
                <img class="card-img-top" src="/images/pathToYourImage.png" alt="Card image cap">
                <div class="card-body">
                  <h4 class="card-title">Card title</h4>
                  <p class="card-text">
                    Some quick example text to build on the card title
                    and make up the bulk of the card's content.
                  </p>
                  <a href="#!" class="btn btn-primary ">Go somewhere</a>
                  <a href="#!" class="btn btn-primary ">Go somewhere</a>
                </div>
              </div>
            </div>
            <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 mt-3">
                  <div class="card">
                <img class="card-img-top" src="/images/pathToYourImage.png" alt="Card image cap">
                <div class="card-body">
                  <h4 class="card-title">Card title</h4>
                  <p class="card-text">
                    Some quick example text to build on the card title
                    and make up the bulk of the card's content.
                  </p>
                  <a href="#!" class="btn btn-primary ">Go somewhere</a>
                  <a href="#!" class="btn btn-primary ">Go somewhere</a>
                </div>
              </div>
            </div>
            <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 mt-3">
              <div class="card">
                <img class="card-img-top" src="/images/pathToYourImage.png" alt="Card image cap">
                <div class="card-body">
                  <h4 class="card-title">Card title</h4>
                  <p class="card-text">
                    Some quick example text to build on the card title
                    and make up the bulk of the card's content.
                  </p>
                  <a href="#!" class="btn btn-primary ">Go somewhere</a>
                  <a href="#!" class="btn btn-primary ">Go somewhere</a>
                </div>
              </div>
            </div>
            <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 mt-3">
              <div class="card">
                <img class="card-img-top" src="/images/pathToYourImage.png" alt="Card image cap">
                <div class="card-body">
                  <h4 class="card-title">Card title</h4>
                  <p class="card-text">
                    Some quick example text to build on the card title
                    and make up the bulk of the card's content.
                  </p>
                  <a href="#!" class="btn btn-primary ">Go somewhere</a>
                  <a href="#!" class="btn btn-primary ">Go somewhere</a>
                </div>
              </div>
            </div>

          </div>
        </div>

      </div>
      <div class="carousel-item">

            <div class="container">
              <div class="row">
                <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                  <div class="card">
                    <img class="card-img-top" src="/images/pathToYourImage.png" alt="Card image cap">
                    <div class="card-body">
                      <h4 class="card-title">Card title</h4>
                      <p class="card-text">
                        Some quick example text to build on the card title
                        and make up the bulk of the card's content.
                      </p>
                      <a href="#!" class="btn btn-primary ">Go somewhere</a>
                      <a href="#!" class="btn btn-primary ">Go somewhere</a>
                    </div>
                  </div>
                </div>
                <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                  <div class="card">
                    <img class="card-img-top" src="/images/pathToYourImage.png" alt="Card image cap">
                    <div class="card-body">
                      <h4 class="card-title">Card title</h4>
                      <p class="card-text">
                        Some quick example text to build on the card title
                        and make up the bulk of the card's content.
                      </p>
                      <a href="#!" class="btn btn-primary ">Go somewhere</a>
                      <a href="#!" class="btn btn-primary ">Go somewhere</a>
                    </div>
                  </div>
                </div>
                <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                  <div class="card">
                    <img class="card-img-top" src="/images/pathToYourImage.png" alt="Card image cap">
                    <div class="card-body">
                      <h4 class="card-title">Card title</h4>
                      <p class="card-text">
                        Some quick example text to build on the card title
                        and make up the bulk of the card's content.
                      </p>
                      <a href="#!" class="btn btn-primary ">Go somewhere</a>
                      <a href="#!" class="btn btn-primary ">Go somewhere</a>
                    </div>
                  </div>
                </div>
                <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 mt-3">
                      <div class="card">
                    <img class="card-img-top" src="/images/pathToYourImage.png" alt="Card image cap">
                    <div class="card-body">
                      <h4 class="card-title">Card title</h4>
                      <p class="card-text">
                        Some quick example text to build on the card title
                        and make up the bulk of the card's content.
                      </p>
                      <a href="#!" class="btn btn-primary ">Go somewhere</a>
                      <a href="#!" class="btn btn-primary ">Go somewhere</a>
                    </div>
                  </div>
                </div>
                <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 mt-3">
                  <div class="card">
                    <img class="card-img-top" src="/images/pathToYourImage.png" alt="Card image cap">
                    <div class="card-body">
                      <h4 class="card-title">Card title</h4>
                      <p class="card-text">
                        Some quick example text to build on the card title
                        and make up the bulk of the card's content.
                      </p>
                      <a href="#!" class="btn btn-primary ">Go somewhere</a>
                      <a href="#!" class="btn btn-primary ">Go somewhere</a>
                    </div>
                  </div>
                </div>
                <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 mt-3">
                  <div class="card">
                    <img class="card-img-top" src="/images/pathToYourImage.png" alt="Card image cap">
                    <div class="card-body">
                      <h4 class="card-title">Card title</h4>
                      <p class="card-text">
                        Some quick example text to build on the card title
                        and make up the bulk of the card's content.
                      </p>
                      <a href="#!" class="btn btn-primary ">Go somewhere</a>
                      <a href="#!" class="btn btn-primary ">Go somewhere</a>
                    </div>
                  </div>
                </div>

              </div>
            </div>

      </div>

      <div class="carousel-item">

            <div class="container">
              <div class="row">
                <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                  <div class="card">
                    <img class="card-img-top" src="/images/pathToYourImage.png" alt="Card image cap">
                    <div class="card-body">
                      <h4 class="card-title">Card title</h4>
                      <p class="card-text">
                        Same quick example text to build on the card title
                        and make up the bulk of the card's content.
                      </p>
                      <a href="#!" class="btn btn-primary ">Go somewhere</a>
                      <a href="#!" class="btn btn-primary ">Go somewhere</a>
                    </div>
                  </div>
                </div>
                <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                  <div class="card">
                    <img class="card-img-top" src="/images/pathToYourImage.png" alt="Card image cap">
                    <div class="card-body">
                      <h4 class="card-title">Card title</h4>
                      <p class="card-text">
                        Some quick example text to build on the card title
                        and make up the bulk of the card's content.
                      </p>
                      <a href="#!" class="btn btn-primary ">Go somewhere</a>
                      <a href="#!" class="btn btn-primary ">Go somewhere</a>
                    </div>
                  </div>
                </div>
                <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                  <div class="card">
                    <img class="card-img-top" src="/images/pathToYourImage.png" alt="Card image cap">
                    <div class="card-body">
                      <h4 class="card-title">Card title</h4>
                      <p class="card-text">
                        Some quick example text to build on the card title
                        and make up the bulk of the card's content.
                      </p>
                      <a href="#!" class="btn btn-primary ">Go somewhere</a>
                      <a href="#!" class="btn btn-primary ">Go somewhere</a>
                    </div>
                  </div>
                </div>
                <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 mt-3">
                      <div class="card">
                    <img class="card-img-top" src="/images/pathToYourImage.png" alt="Card image cap">
                    <div class="card-body">
                      <h4 class="card-title">Card title</h4>
                      <p class="card-text">
                        Some quick example text to build on the card title
                        and make up the bulk of the card's content.
                      </p>
                      <a href="#!" class="btn btn-primary ">Go somewhere</a>
                      <a href="#!" class="btn btn-primary ">Go somewhere</a>
                    </div>
                  </div>
                </div>
                <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 mt-3">
                  <div class="card">
                    <img class="card-img-top" src="/images/pathToYourImage.png" alt="Card image cap">
                    <div class="card-body">
                      <h4 class="card-title">Card title</h4>
                      <p class="card-text">
                        Some quick example text to build on the card title
                        and make up the bulk of the card's content.
                      </p>
                      <a href="#!" class="btn btn-primary ">Go somewhere</a>
                      <a href="#!" class="btn btn-primary ">Go somewhere</a>
                    </div>
                  </div>
                </div>
                <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 mt-3">
                  <div class="card">
                    <img class="card-img-top" src="/images/pathToYourImage.png" alt="Card image cap">
                    <div class="card-body">
                      <h4 class="card-title">Card title</h4>
                      <p class="card-text">
                        Some quick example text to build on the card title
                        and make up the bulk of the card's content.
                      </p>
                      <a href="#!" class="btn btn-primary ">Go somewhere</a>
                      <a href="#!" class="btn btn-primary ">Go somewhere</a>
                    </div>
                  </div>
                </div>

              </div>
            </div>

      </div>

    </div>
      
  </div>

</body>
</html>

1 respuesta 1

0

Solucionado. Solo añadí esto

          <li class="page-item"><a class="page-link" href="#carouselExampleIndicators" role="button" data-slide-to="0">1</a></li>
          <li class="page-item"><a class="page-link" href="#carouselExampleIndicators" role="button" data-slide-to="1">2</a></li>
          <li class="page-item"><a class="page-link" href="#carouselExampleIndicators" role="button" data-slide-to="2">3</a></li>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.