Проблема с прокруткой Owl Carousel v2.3.4 (1 Viewer)

[Simon Kirites]

Проблема с прокруткой на мобильной версии когда делаешь слайд в левом или в право то появляется такая ошибка на сайте стоит jQuery v3.6.0 на jQuery 2x.x.x такой проблемы нету

Спойлер: Скрин

 

[NullRelease]

Проблема с прокруткой на мобильной версии когда делаешь слайд в левом или в право то появляется такая ошибка на сайте стоит jQuery v3.6.0 на jQuery 2x.x.x такой проблемы нету

Тестировал Owl Carousel на jQuery v3.x не обнаружил никаких проблем, ошибка ни как не связана с версии jQuery. Всего скорее у вас проблема и конфликт с другими скриптами!

 

[NullRelease]

Если вам это как-то поможет, можете попробовать использовать этот скрипт, скачен с офф. сайта разработчика.

На сайте использовал вот такую конструкцию:

$('.carousel').owlCarousel({
      autoplay: true,
      autoplayHoverPause:true,
      autoplayTimeout: 4500,
      smartSpeed: 500,
      animateOut: 'slideOutDown',
      animateIn: 'flipInX',
      loop:true,
      margin: 20,
      nav:true,
      navText: false,
      dots: false,
      itemElement: 'li',
      stageElement: 'ul',
      responsive:{0:{items:1}, 300:{items:1}, 400:{items:2}, 600:{items:3}, 1000:{items:5}}
    });

навигацию кнопок "назад" и "вперёд" использовал в стилях свои, при помощи FontAwesome

 

[Simon Kirites]

Kарусель в архиве у меня проблема именно когда с телефона не по кнопке вперед назад а пальцем делаешь слайд вперед назад

В js у меня так

$(document).ready(function(){
  $('.owl-carousel-anime').owlCarousel({
    loop:true,
    autoplayHoverPause: true,
    smartSpeed: 600,
    slideBy: 1,
    autoplay: true,
    autoplayTimeout: 5000,
    margin:1,
    autoHeight:true,
    nav:false,
    dots:false,
    responsive:{
        0:{
            items:3
        },
        600:{
            items:5
        },
        1000:{
            items:7
        }
    }
    })

    $('.anime-next').on('click', function() {
        $('.owl-carousel-anime').trigger('next.owl.carousel');
    });
    $('.anime-previous').on('click', function() {
        $('.owl-carousel-anime').trigger('prev.owl.carousel');
    });


  $('.owl-carousel-channel').owlCarousel({
    loop:true,
    autoplayHoverPause: true,
    smartSpeed: 600,
    slideBy: 1,
    autoplay: true,
    autoplayTimeout: 5000,
    margin:1,
    nav:false,
    dots:false,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:2
        },
        1000:{
            items:3
        }
    }
    })

    $('.channel-next').on('click', function() {
        $('.owl-carousel-channel').trigger('next.owl.carousel');
    });
    $('.channel-previous').on('click', function() {
        $('.owl-carousel-channel').trigger('prev.owl.carousel');
    });
   
   
$('.owl-carousel-re').owlCarousel({
    loop:true,
    autoplayHoverPause: true,
    smartSpeed: 600,
    slideBy: 1,
    autoplay: true,
    autoplayTimeout: 5000,
    margin:1,
    nav:false,
    dots:false,
    responsive:{
        0:{
            items:2
        },
        600:{
            items:3
        },
        1000:{
            items:4
        }
    }
    })

    $('.re-next').on('click', function() {
        $('.owl-carousel-re').trigger('next.owl.carousel');
    });
    $('.re-previous').on('click', function() {
        $('.owl-carousel-re').trigger('prev.owl.carousel');
    });

Если вам это как-то поможет, можете попробовать использовать этот скрипт, скачен с офф. сайта разработчика.

На сайте использовал вот такую конструкцию:

$('.carousel').owlCarousel({
      autoplay: true,
      autoplayHoverPause:true,
      autoplayTimeout: 4500,
      smartSpeed: 500,
      animateOut: 'slideOutDown',
      animateIn: 'flipInX',
      loop:true,
      margin: 20,
      nav:true,
      navText: false,
      dots: false,
      itemElement: 'li',
      stageElement: 'ul',
      responsive:{0:{items:1}, 300:{items:1}, 400:{items:2}, 600:{items:3}, 1000:{items:5}}
    });

навигацию кнопок "назад" и "вперёд" использовал в стилях свои, при помощи FontAwesome

 

[NullRelease]

Kарусель в архиве у меня проблема именно когда с телефона не по кнопке вперед назад а пальцем делаешь слайд вперед назад

Теперь понял в чём проблема. Из документа разработчика. Если вы вызываете preventDefault каждый touchstart, у вас также должно быть правило CSS для отключения сенсорной прокрутки. Если у вас есть горизонтальная карусель, рассмотрите возможность применения touch-action: pan-y pinch-zoom; к ней, чтобы пользователь мог прокручивать вертикально и масштабировать как обычно.

Например:

.owl-carousel-anime, .owl-carousel-channel, .owl-carousel-re {
-ms-touch-action: pan-y;
touch-action: pan-y;
}

или

.owl-carousel-anime, .owl-carousel-channel, .owl-carousel-re {
-ms-touch-action: none;
touch-action: none;
}

Если и это не поможет, то можно использовать скрипт, добавьте в конец своего js документа вот такие строки:

jQuery.event.special.touchstart = {
     setup: function (_, ns, handle) {
        this.addEventListener('touchend', handle, { passive: !ns.includes('noPreventDefault') });
     }
};

конечно не самый лучший вариант, но должно сработать!

 

[Simon Kirites]

Теперь понял в чём проблема. Из документа разработчика. Если вы вызываете preventDefault каждый touchstart, у вас также должно быть правило CSS для отключения сенсорной прокрутки. Если у вас есть горизонтальная карусель, рассмотрите возможность применения touch-action: pan-y pinch-zoom; к ней, чтобы пользователь мог прокручивать вертикально и масштабировать как обычно.

Например:

.owl-carousel-anime, .owl-carousel-channel, .owl-carousel-re {
-ms-touch-action: pan-y;
touch-action: pan-y;
}

или

.owl-carousel-anime, .owl-carousel-channel, .owl-carousel-re {
-ms-touch-action: none;
touch-action: none;
}

Если и это не поможет, то можно использовать скрипт, добавьте в конец своего js документа вот такие строки:

jQuery.event.special.touchstart = {
     setup: function (_, ns, handle) {
        this.addEventListener('touchend', handle, { passive: !ns.includes('noPreventDefault') });
     }
};

конечно не самый лучший вариант, но должно сработать!

js код помог согласен что не лучший вариант, но хотя бы так. Спасибо, в любом случае

 

[NullRelease]

Ожидается, что это будет испавлено в jQuery 4, а пока что предлагаемое исправление состоит в том, чтобы добавить этот код сразу после загрузки jQuery:

jQuery.event.special.touchstart = {
    setup: function( _, ns, handle ) {
        this.addEventListener("touchstart", handle, { passive: !ns.includes("noPreventDefault") });
    }
};
jQuery.event.special.touchmove = {
    setup: function( _, ns, handle ) {
        this.addEventListener("touchmove", handle, { passive: !ns.includes("noPreventDefault") });
    }
};
jQuery.event.special.wheel = {
    setup: function( _, ns, handle ){
        this.addEventListener("wheel", handle, { passive: true });
    }
};
jQuery.event.special.mousewheel = {
    setup: function( _, ns, handle ){
        this.addEventListener("mousewheel", handle, { passive: true });
    }
};

 

[Simon Kirites]

Ожидается, что это будет испавлено в jQuery 4, а пока что предлагаемое исправление состоит в том, чтобы добавить этот код сразу после загрузки jQuery:

jQuery.event.special.touchstart = {
    setup: function( _, ns, handle ) {
        this.addEventListener("touchstart", handle, { passive: !ns.includes("noPreventDefault") });
    }
};
jQuery.event.special.touchmove = {
    setup: function( _, ns, handle ) {
        this.addEventListener("touchmove", handle, { passive: !ns.includes("noPreventDefault") });
    }
};
jQuery.event.special.wheel = {
    setup: function( _, ns, handle ){
        this.addEventListener("wheel", handle, { passive: true });
    }
};
jQuery.event.special.mousewheel = {
    setup: function( _, ns, handle ){
        this.addEventListener("mousewheel", handle, { passive: true });
    }
};

К сожалению это не помогло

 

[NullRelease]

Теперь понял в чём проблема. Из документа разработчика. Если вы вызываете preventDefault каждый touchstart, у вас также должно быть правило CSS для отключения сенсорной прокрутки. Если у вас есть горизонтальная карусель, рассмотрите возможность применения touch-action: pan-y pinch-zoom; к ней, чтобы пользователь мог прокручивать вертикально и масштабировать как обычно.

Например:

.owl-carousel-anime, .owl-carousel-channel, .owl-carousel-re {
-ms-touch-action: pan-y;
touch-action: pan-y;
}

или

.owl-carousel-anime, .owl-carousel-channel, .owl-carousel-re {
-ms-touch-action: none;
touch-action: none;
}

Если и это не поможет, то можно использовать скрипт, добавьте в конец своего js документа вот такие строки:

jQuery.event.special.touchstart = {
     setup: function (_, ns, handle) {
        this.addEventListener('touchend', handle, { passive: !ns.includes('noPreventDefault') });
     }
};

конечно не самый лучший вариант, но должно сработать!

Используйте этот вариант, он рабочий!

 

[Simon Kirites]

Используйте этот вариант, он рабочий!

Так и сделал js код поставил