How can I prevent a product carousel from continuously looping?

Store Design
1

How do I make product carousel stop from looping?

I tried setting the loop to false, which stops it from looping, but the problem is that it becomes un-swipeable on mobile. In other words, you can’t swipe it left/right on mobile, even though it works on desktop.

This is my site: https://gopandapack.com/

Anyone know how to fix it?

2

You can do something like this

$('.owl-carousel').owlCarousel({
        loop:false,    
        margin: 5,  
        nav: true,
        navText: ["", ""],
        dots: false,        
        responsive:{
            0:{
                items:3,           
            },
            480:{
                items:4,           
            },
            640:{
                items:5,           
            }, 
            1000:{
                items:8,                
            }
        }
    });
3

Thank you. I don’t think it’s any different from the current code, is it?

It works fine on desktop, but you cannot swipe left/right on mobile. I don’t want to use left/right arrows on mobile. I’d like for it to be swipe-able using gestures.

This is the current code:

$('.products-carousel').owlCarousel({
    item: 2.5,
    nav: false,
    loop: true,
    margin: 17,
    dots: false,
    thumbs: false,
    autoplay: false,
    autoplaySpeed: 1000,
    responsiveClass: true,
    autoplayTimeout: 3000,
    navText: ["", ""],
    responsive: {
      0: {
        items: 1.5
      },
      576: {
        items: 2.5
      },
      768: {
        items: 3,
        nav: true,
        center: false,
        autoplay: false
      },
      1024: {
        items: 5,
        nav: true,
        center: false,
        autoplay: false
      }
    }
  })
4 
responsive: {
      0: {
        items: 1.5,
        nav: false,
      },
      576: {
        items: 2.5
      },
      768: {
        items: 3,
        nav: true,
        center: false,
        autoplay: false
      },
      1024: {
        items: 5,
        nav: true,
        center: false,
        autoplay: false
      }
    }
5

@Hardik29418 Thank you. Unfortunately, this didn’t work :disappointed_face:

I set it to loop: false, but it still created that odd behavior on mobile.

6

So what I did was set default to:

loop: false

However, since this messes up the mobile swiping, I set mobile to:

loop: true

While it fixes the issue on desktop, it doesn’t fix mobile :disappointed_face: