Twig code in owl-carousel shortcode

[thebasti314]

If I pack twig code within an OWL element, an empty carousel element is created for each div container.

I grab flex objects and go over them in a for loop. There are three elements in the flex.

{% set flex = grav.get('flex') %}
{% set directory = flex.directory('news') %}
{% set news = directory.collection() %}

[owl-carousel` items=1 margin=10 loop=false nav=true responsive={0:{items:1},600:{items:2},1000:{items:3}}]

   {% for eintrag in news.filterBy({published: true}).limit(0, 10) %}
            <div class="text-xl">
               {{ eintrag.titel|e}}
            </div>
   {% endfor %}
 
[/owl-carousel]

The HTML-Output looks like this:

<div class="owl-stage-outer">
<div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); transition: all 0.25s ease 0s; width: 3496px;">
<div class="owl-item active" style="width: 489.333px; margin-right: 10px;">
           <p></p>
           </div>
<div class="owl-item active" style="width: 489.333px; margin-right: 10px;">
          <div class="text-xl">
             + + + NEWS + + + SPECIAL + + +
           </div>
</div>
<div class="owl-item active" style="width: 489.333px; margin-right: 10px;">
            <p></p>
</div>
<div class="owl-item active" style="width: 489.333px; margin-right: 10px;"><div class="text-xl">
              + + + NEWS + + + SPECIAL + + +
            </div>
</div>
<div class="owl-item" style="width: 489.333px; margin-right: 10px;">
            <p></p>
</div>
<div class="owl-item" style="width: 489.333px; margin-right: 10px;">
             <div class="text-xl">
               + + + NEWS + + + NEWS + + +
            </div>
</div>
<div class="owl-item" style="width: 489.333px; margin-right: 10px;">
             <p></p>
</div>
</div>
</div>

I have no idea, where the <p></p>'s come from. It looks like a bug.

Many regards!

[rhukster]

The empty

comes from the whitespace in your loop. tighten this up:

[owl-carousel` items=1 margin=10 loop=false nav=true responsive={0:{items:1},600:{items:2},1000:{items:3}}]
{% for eintrag in news.filterBy({published: true}).limit(0, 10) -%}
<div class="text-xl">
   {{ eintrag.titel|e}}
</div>
{%- endfor %}
[/owl-carousel]

[thebasti314]

Thanks for your quick response. Unfortunately your solution does not work for me.

Modify the Plugin-Template File like this solves the problem for me. But it seems more like a hack, than a solution. :)

<div class="owl-carousel owl-theme" id="{{ owl_id }}">
    {{ owl_items|regex_replace('(<p>|<\/p>)','')|raw }}
</div>

[thebasti314]

Okay. I tested my previous solution and that worked for me. Thanks.

Another question - maybe depending on this - is:

How could i dynamically change this Shortcode line?

[owl-carousel items=1 margin=10 mergeFit=true center=false loop=false nav=true responsive={0:{items:1},1000:{items:2}}]

I goal is - depending on the number of items in the owl slider - to modify this line. If only one item is in the slider, the responsive part is not needed (and the one item is showed in full width. Do you have any idea how to do it?

Many regards!