1

Hola tengo el siguiente código que es un carrusel pero no logro hacer que direcciones al lado contrario

<a href="https://tuhogarconsentido.com/soluciones/" id="carouselExampleSlidesOnly" class="col-lg-3 carousel direction-right slide" data-ride="carousel" data-interval="3000" >
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img class="d-block w-100" src="{{ asset('images/services/B2b-IMG-home.png') }}" alt="First slide">
                </div>
                <div class="carousel-item">
                  <img class="d-block w-100" src="{{ asset('images/services/Dentista-IMG-HOME.png') }}" alt="Second slide">
                </div>
              </div>
            </a>

En la documentación menciona lo siguiente: direction: The direction in which the carousel is sliding (either "left" or "right"). All carousel events are fired at the carousel itself (i.e. at the div class="carousel"). Ya hice varias pruebas pero no logro que vaya a la derecha. Como puedo hacerlo

5
  • Qué versión de Bootstrap usas? Te refieres a tener un carousel RTL? Que corra automáticamente desde la derecha hacia la izquierda? Commented el 17 jun. 2021 a las 20:04
  • La version es 4, y si corre de manera automática de derecha a izquierda pero quiero que vaya en sentido contrario
    – Hugo
    Commented el 17 jun. 2021 a las 20:11
  • Creo que no puedes salvo que toques el código. En la documentación no da ninguna opción para modificar el sentido de desplazamiento. Lo que mencionas se refiere a los eventos provocado al usar los botones prev/next
    – Juan
    Commented el 17 jun. 2021 a las 22:19
  • Ok, muchas gracias por la ayuda!!!
    – Hugo
    Commented el 17 jun. 2021 a las 22:21
  • Sí, se puede, con los eventos getbootstrap.com/docs/4.6/components/carousel/#events De igual forma en la versión 5 se menciona la tecnología RTL, aunque experimental getbootstrap.com/docs/5.0/getting-started/rtl Commented el 17 jun. 2021 a las 22:29

1 respuesta 1

0

Parece que hay una solución. Es algo truculenta, pero funciona sin tocar el código el carrusel.

Te doy un ejemplo simple que seguro podrás adaptar si no te vale tal como está.

Primero desactivas el modo automático.

<div id="carouselExampleInterval" class="carousel slide" data-bs-interval="false" data-bs-ride="false">

Luego metes un script para que automáticamente "pulse" el botón izquierdo.

<script>
    setInterval(function(){ 
        document.getElementsByClassName('carousel-control-prev')[0].click()
    }, 3000)
</script>

Ahora cada 3 segundos se pulsará el botón izquierdo y el slide pasará de Izquerda a Derecha.

He usado el ClassName para seleccionar el botón, también puedes ponerle un id y seleccionarlo mediante getElementById. A tu gusto.
Ah, lo he probado y funciona con Bootstrap 5, pero seguro que también va con versiones anteriores.

¿Es lo que querías?

1
  • Deja lo checo, hare estos cambios. En cuanto funcione te lo notifico y palomeo tu respuesta. Gracias
    – Hugo
    Commented el 18 jun. 2021 a las 23:10

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.