0

tengo una plantilla de boostrap 5 que viene con un carrusel responsive, este muestra diferente número de elementos según el ancho de pantalla del dispositivo, ahora bien, yo necesito que este carrusel, funcione normalmente como lo hace en dispositivos móviles, pero cuando esté en pc, el carrusel deshabilite sus propiedades, y que los elementos puedan reaccionar como en un sistema grid.

Intenté con js, reconocer el ancho de pantalla para remover las clases que contengan owl-carousel mobile-carousel, para que de esta manera, el archivo no ejecute nada, pero no me funcionó

// mobile carousel (uses the Owl Carousel library)
  $(".mobile-carousel").owlCarousel({
    autoplay: false,
    dots: true,
    loop: true,
    responsive: {
      0: {
        items: 1
      },
      768: {
        items: 2
      },
      900: {
        items: 4
      }
    }
  });

if (screen.width > 769) 
$('#main').removeClass('owl-carousel mobile-carousel');
<main id="main">
<div class="owl-carousel mobile-carousel">
          <div class="member">
            <div class="pic"><img src="assets/img/p1.png" class="img-fluid" alt=""></div>
            <div class="member-info">
              <h4>Sarah Jhonson</h4>
              <a href="#" class="btn btn-secondary">Reserva aquí</a>
            </div>
          </div>
          <div class="member">
            <div class="pic"><img src="https://www.bupa.cl/bupa/site/artic/20181024/imag/foto_0000001720181024111125.png" class="img-fluid" alt=""></div>
            <div class="member-info">
              <h4>Sarah Jhonson</h4>
              <a href="#" class="btn btn-secondary">Reserva aquí</a>
            </div>
          </div>
          <div class="member">
            <div class="pic"><img src="assets/img/p3.png" class="img-fluid" alt=""></div>
            <div class="member-info">
              <h4>Sarah Jhonson</h4>
              <a href="#" class="btn btn-secondary">Reserva aquí</a>
            </div>
          </div>
          <div class="member">
            <div class="pic"><img src="assets/img/p4.png" class="img-fluid" alt=""></div>
            <div class="member-info">
              <h4>Sarah Jhonson</h4>
              <a href="#" class="btn btn-secondary">Reserva aquí</a>
            </div>
          </div>
          <div class="member">
            <div class="pic"><img src="assets/img/p4.png" class="img-fluid" alt=""></div>
            <div class="member-info">
              <h4>Sarah Jhonson</h4>
              <a href="#" class="btn btn-secondary">Reserva aquí</a>
            </div>
          </div>
        </div>
</main>

`

2 respuestas 2

2

El primer problema es que activas el carrusel antes de analizar el ancho de pantalla y deberías activarlo solo cuando la pantalla tenga un ancho menor que el deseado.

El segundo problema es que intentas quitarle clases al div #main, pero no tiene clase, solo ID, es el primer hijo el que debes modificar.

if(screen.width > 769) {
    // Eliminar clase, pero no a #main, sino al div inmediato
    $('#main > div').removeClass('owl-carousel mobile-carousel');
} else {
  // Activar carousel
  $(".mobile-carousel").owlCarousel({
    autoplay: false,
    dots: true,
    loop: true,
    responsive: {
      0: {
        items: 1
      },
      768: {
        items: 2
      },
      900: {
        items: 4
      }
    }
  });
}
1
  • muchas gracias por tu ayuda, de momento, me sirve más el otro por lo que tiene varios carruseles, pero este me sirve para entender a quien borra las clases, gracias Commented el 18 ago. 2021 a las 19:59
1

Puedes iniciar el carrousel solo en el tamaño de pantalla que quieras

if (screen.width < 769) {
    // mobile carousel (uses the Owl Carousel library)
      $(".mobile-carousel").owlCarousel({
        autoplay: false,
        dots: true,
        loop: true,
        responsive: {
          0: {
            items: 1
          },
          768: {
            items: 2
          },
          900: {
            items: 4
          }
        }
      });
}

Así solo se cargará en pantallas pequeñas, pero no en dispositivos con pantallas grandes.

1
  • gracias, este me funcionó muy bien porque si necesito añadir bastantes elementos de tipo carrusel en este sitio y este formatea todos, gracias Commented el 18 ago. 2021 a las 19:57

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.