0

resulta que tengo un Owl Carrousel del 100% en tamaño de la página (Vista desde un celular) Pero este solo me permite deslizar las imagenes en horizontal para cambiarlas, sin embargo cuando quiero deslizar la página verticalmente no puedo hacerlo ya que el Carrusel ocupa el 100% de la pantalla, he visto algunos códigos por ahí pero ninguno me ha servido, si alguien me puede ayudar, de ante mano. Muchas gracias de verdad. Este es el código del Carrusel...

<section class="home-slider owl-carousel">
  <div class="slider-item" style="background-image:url(images/fondo5.jpeg);">
    <div class="overlay"></div>
    <div class="container" >
      <div class="row no-gutters slider-text align-items-center justify-content-start" data-scrollax-parent="true">
      <div class="col-md-7 ftco-animate" >


            <img src="logos/logo.png" style="max-width: 100%;">
            <span class="subheading">Servicio técnico especializado en las mejores marcas del mercado con repuestos genuinos y con el respaldo del trabajo garantizado.</span>
        <p><a href="contact.html" class="btn btn-primary px-4 py-3 mt-3">Solicitar Servicio</a></p>
      </div>
    </div>
    </div>
  </div>

  <div class="slider-item" style="background-image:url(images/fondo5.png);">
    <div class="overlay"></div>
    <div class="container">
      <div class="row no-gutters slider-text align-items-center justify-content-start" data-scrollax-parent="true">
      <div class="col-md-7 ftco-animate">

    <img src="logos/logo.png" style="max-width: 100%">
            <span class="subheading">Servicio técnico especializado en las mejores marcas del mercado con repuestos genuinos y con el respaldo del trabajo garantizado.</span>
        <p><a href="contact.html" class="btn btn-primary px-4 py-3 mt-3">Solicitar Servicio</a></p>
      </div>
    </div>
    </div>
  </div>


</section>

Y a continuación la configuración que viene por defecto:

var carousel = function() {
    $('.home-slider').owlCarousel({
    loop:true,
    autoplay: true,
    margin:0,
    animateOut: 'fadeOut',
    animateIn: 'fadeIn',
    nav:false,
    autoplayHoverPause: false,
    items: 1,
    navText : ["<span class='ion-md-arrow-back'></span>","<span class='ion-chevron-right'></span>"],
    responsive:{
      0:{
        items:1
      },
      600:{
        items:1
      },
      1000:{
        items:1
      }
    }

1 respuesta 1

0

el problema viene dado por la propiedad TouchDrag de OwlCarousel, espero te funcione el siguiente código.

$('.home-slider').owlCarousel({
    loop:true,
    autoplay: true,
    margin:0,
    animateOut: 'fadeOut',
    animateIn: 'fadeIn',
    nav:false,
    autoplayHoverPause: false,
    items: 1,
    navText : ["<span class='ion-md-arrow-back'></span>","<span class='ion-chevron-right'></span>"],
        mouseDrag: true,
        touchDrag: false,
        responsive: {
          0: {
            items: 1,
            mouseDrag: false,
            touchDrag: true
          },
          600: {
            items: 1,
            mouseDrag: false,
            touchDrag: true
          },
          1000: {
            items: 1
          }
        }
      });
3
  • Hola, gracias por ayudarme, te cuento: Inserté el código como me lo diste pero ahora la página se queda en la pantalla de carga, hace un rato estuve modificando las opciones de touch-action en el archivo Css, tiene algo que ver con que no cargue? Commented el 30 abr. 2020 a las 4:29
  • La consola del navegador te arroja algún error? Commented el 30 abr. 2020 a las 4:33
  • Ya pude encontrar el error, y solamente era una coma, gracias a ti el código ya funciona y el Carrusel desliza correctamente en vertical, de verdad, muchas gracias! Commented el 30 abr. 2020 a las 4:45

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.