1

El que tiene bootstrap tiene incluidas las flechas dentro de la imagen pero no soy muy fan ya que se pierde con la imagen, quisiera tener las flechas fuera del recuadro de la imagen, estuve jugando con CSS pero solo logro mover las flechas dentro del recuadro que incluye las imagenes.

Actualmente mi codigo es:

            <div class="row">
                <div class="col-md-2" style="background: #ece7de;"></div>
                <div class="col-md-8" style="background: #ece7de;">
                    <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
                        <div class="carousel-indicators">
                          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
                          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
                        </div>
                        <div class="carousel-inner">
                          <div class="carousel-item active">
                            <img src="./recursos/galeria/DM_03525.jpg" class="d-block w-100" alt="...">
                          </div>
                          <div class="carousel-item">
                            <img src="./recursos/galeria/DM_03855.jpg" class="d-block w-100" alt="...">
                          </div>
                          <div class="carousel-item">
                            <img src="./recursos/galeria/fIMG_9002.JPG" class="d-block w-100" alt="...">
                          </div>
                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                          <span class="sr-only">Before</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                        <span class="sr-only">Next</span>
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        </button>
                    </div>
                    <br><br><br><br>
                </div>
                <div class="col-md-2" style="background: #ece7de;"></div>
            </div>

Y se ve así: introducir la descripción de la imagen aquí

Como pueden ver, las flechas se ven muy poco y dentro de la imagen, necesito que quede lo más similar a esto:

introducir la descripción de la imagen aquí

Ignoren las lineas verticales azules, son para ubicar proporción del sitio.

El CSS de bootstrap no esta modificado en nada para el carousel.

Se agradece su ayuda!

1
  • Por cierto, las imagenes de anterior y siguiente deberían estar mas obscuras y con cierta transparencia, casi estoy seguro que lo han visto antes en algún otro sitio web.
    – Junkboy
    Commented el 26 ene. 2023 a las 23:30

1 respuesta 1

1

Traté de acercarme más a lo que esperabas. En tu CSS tendrías que ingresar a las clases de los botones del carousel, de la cual son las siguientes:

.carousel-control-prev // -> es el botón de la izquierda
.carousel-control-next // -> es el botón de la derecha

Y darle las siguientes propiedades:

.carousel .carousel-control-prev {
  position: absolute;
  left: -30%;
  z-index: 1;
  color: #0a0a0a !important;
  font-weight: bold;
}

.carousel .carousel-control-next {
  position: absolute;
  right: -30%;
  z-index: 1;
  color: #0a0a0a !important;
  font-weight: bold;
}

Aquí lo único que estoy haciendo es mover a la izquierda con un % para que se mantenga en esa posición cuando la pantalla sea más chica, y le di un color y grosor a la letra para que se note el resultado.


También, me di cuenta que cuando el ancho de la pantalla es de exactamente 768px, el ancho de la imagen se estira del todo y empujaría a los botones hacia fuera del contenedor y ya no se observaría, entonces use la regla @media para indicar que cuando el ancho es de 768px, los botones se posicionen en su estado de siempre (o sea dentro de la imagen):

@media (max-width: 768px) {
  .carousel .carousel-control-prev {
    left: 0%;
    color: #ffffff !important;
  }

  .carousel .carousel-control-next {
    right: 0%;
    color: #ffffff !important;
  }
}

Código completo.

2
  • 1
    Definitivamente Me sirvió y muchisimas gracias por eso! Al menos ya está solucionado el tema de posicionar las flechas fuera de la imagen, cosa que me ayuda bastante! Aún no es 100% la solución que buscaba pero.. tal vez es porque no se puede con bootstrap, usando un componente creado de 0 y utilizando js es un hecho que se puede crear me lo imagino, pero.. no estoy en ese nivel de conocimiento para crearlo a día de hoy.
    – Junkboy
    Commented el 27 ene. 2023 a las 0:05
  • Claro, de todas formas, traté de acercarme lo más que pude a lo que pedías. Recuerda marcar la respuesta como verificada dándole al ✔️ si te sirvió para que tu pregunta esté como respondida. Saludos. Commented el 27 ene. 2023 a las 0:14

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.