3

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>

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. Because it's "pseudo-dynamic' (with Hugo), 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. I created a Fiddle to isolate the issue, with multiple Carousels to simulate what I really have and, at first it worked, no unnecessary duplication, but then I saw the execution was set in the windows.onload which, for some reason I'm not aware of, was making that ternary always eval to false.

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?

0 Answers0