Search code examples
jqueryowl-carousel

Owl Carousel mouse drag not working in my browser and mobile


When I try to drag slider using mouse then slider always starts the first position. It's not working properly. I am using the code below:

$("#owl-carousel1").owlCarousel({
        loop: false,
        margin: 30,
        responsiveClass: true,
        dots: false,
        nav: true,
        mouseDrag: true,
        touchDrag: true,
        slideBy: 1,
        responsive: {
            0: {
                items: 1.25
            },
            500: {
                items: 1.5
            },
            700: {
                items: 2.5
            },
            1200: {
                items: 3.5,
                margin: 30
            },
            1400: {
                items: 3.5,
                margin: 30
            },
            1600: {
                items: 3.5,
                margin: 30
            }
        }
    });

Solution

  • i found that using {items:1.X} result in drag problems, try removing it as below and it will get back to work normally.
    For what you are trying to do with the '1.X' decimal value, try to use 'stagePadding:30' and replace the value 30 with the appropriate value for your case.

    responsive: {
            0: {
                items: 1
            },
            500: {
                items: 1
            },
            700: {
                items: 2
            },
            1200: {
                items: 3,
                margin: 30
            },
            1400: {
                items: 3,
                margin: 30
            },
            1600: {
                items: 3,
                margin: 30
            }
        }