How to display 24 items in a carousel

Help
1

Im working in a project and currently I have a data file that display 24 clients in a page that im taking for a data file

{% for client in site.data.clients %}
        <li>
          <a href="{{client.URL}}" target="_blank">
            <img src="{% asset_path {{client.image}} %}"
              alt="{{ client.alt }}">
          </a>
        </li>
  {% endfor %}

I would like to implement a carousel that display 12 items in one slide (and when clicked the arrow) display the other 12 items.

2

so you just need the first 12 and the last twelve to be separate? or you need help with the carousel?

i think this may help with breaking it into sets of 12:

there are some other things there that may help too.

3

slider
slider.jpg1701×567 57.6 KB

Still havent figure it out how to split the elements. I have tried something like this

<div class=" col-md-9 clients side padding-content">

<ul class="clients-grid grid-6 nobottommargin clearfix">
  {% comment %}
    `site.data.clients` defined in `_data/clients.yml`
  {% endcomment %}
  {% for client in site.data.clients %}
    {% if forloop.index > 12 %}
      {% assign slidenum = 2 %}
    {% else %}
      {% assign slidenum = 1 %}
    {% endif %}
    <li class="slide{{ slidenum }}">
      <a href="{{client.URL}}" target="_blank">
        <img src="{% asset_path {{client.image}} %}" alt="{{ client.alt }}">
      </a>
    </li>
  {% endfor %}
</ul>

but still cant figure it out how to split elements in the owl carousel

4

how is a carousel slide defined? what is an example with 2 slides that you make statically? do both slides show at the same time like your example image?

I would think the logic is to count to 12 and then start a new slide for the next 12 but starting at the 13th one using limit and offset.

You could use your if/forloop.index to see if you need to do that, if so then do 2 for loops one with limit 12 and the other offset 13 (or 11and 12 if it is starting at 0).

I can’t say that I have actual experience doing what you want, just going by the docs to guess what could be done.