Owl Carousel 'loop' duplicating items "unnecessarily"

support
1

I’m having a hard time trying to make the loop option, when enabled, not duplicate the elements needed to cause the illusion of loop when the markup doesn’t have enough items.

For example, with this markup:

<div class="col-7 col-md-7 d-flex justify-content-center align-items-center hidden-sm-down shows">

  <ul class="owl-carousel">

    <li class="item">
      <img src="" />
    </li>
    
    <li class="item">
      <img src="" />
    </li>

    <li class="item">
      <img src="" />
    </li>

    <li class="item">
      <img src="" />
    </li>
    
  </ul>

</div>

This markup is generated by a simple range over Pages that doesn’t have a parameter:

{{ range where .Pages "Params.featured" "==" nil }}(...){{ end }}

I’ve defined the basic structure that fits 3 images visible in Bootstrap 4 col-md-7. The others stay hidden, accessible through the Carousel, with not much of a special configuration:

$( '.owl-carousel' ).owlCarousel({

      loop: true,
      margin: 10,
      dots: false,
      navText: [ '<span class="fa fa-chevron-left"></span>', '<span class="fa fa-chevron-right"></span>' ],
      responsive:{

        0: {
            items: 1,
            nav: false
        },

        1000: {
            items: 3,
            nav: true
        }
    }
})

It would be perfect if I always have at least three <li class="item"></li> and that’s the problem. But when published it’s not going to have much content, so it’s obvious that this Carousel will not have this minimum amount.

I’ve searched for a solution and found this but it didn’t work for me, even though it should. Then I create a Fiddle to isolate the issue and it worked perfectly. I’ve even created multiple Carousels to simulate what I really have and everything still worked as expected.

First I thought it could be because jQuery.size() doesn’t exist anymore, but even changing it to the native length it was still repeating.

I’ve reviewed the source-code several times to see if Hugo was generating the correct markup and, except for some fancies here and there of the real implementation that could interfere, it was all good.

A workaround that made it almost work was by generating dummy <li></li> after Hugo’s “loop” (range). But as side effect this brought the navigation arrows/buttons that, if clicked a few times, eventually will position Owl’s offset at the blank, fake entries.

Any ideas of what else could be wrong?

2

@magnusthorek Is your problem that you are not getting your desired output with respect to the HTML or that you’re wondering about the JavaScript? Is this for a particular theme? If the HTML is demonstrating your desired output, I think this is more of a JS-related question. Can you point me to a repo please?