如何在旋转木马中显示24个项目-Jekyll

我在一个项目中工作，目前我有一个数据文件，在一个页面中显示24个客户端，我将其作为一个数据文件

 {% 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 %}

{%用于site.data.clients%中的客户端


{%endfor%}

我想实现一个旋转木马，在一张幻灯片中显示12个项目（单击箭头时）显示其他12个项目

我曾尝试在owl转盘中实现这一点，但不知何故，我在第一张幻灯片的第一个元素中插入了所有项目。仍在试图找到一种方法，将所有元素拆分为两张幻灯片，如图所示

到目前为止，我已经实施了：

            <div class="testi-service owl-carousel owl-theme ">
             {% for client in site.data.clients %}
               {% if forloop.index > 24 %}
                 {% assign slidenum = 2 %}
               {% else %}
                 {% assign slidenum = 1 %}
              {% endif %}
          <div class="owl-item">
            <div class="oc-item slide{{ slidenum }}">
              <a href="{{client.URL}}" target="_blank">
                  <img src="{% asset_path {{client.image}} %}" alt="{{ client.alt }}">
              </a>
            </div>
          </div>

          {% endfor %}
        </div>

      </div>

{site.data.clients%中的客户端为%s}
{%if-forloop.index>24%}
{%assign slidenum=2%}
{%else%}
{%assign slidenum=1%}
{%endif%}
{%endfor%}

这可以通过以下液体实现：

{% 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 %}

您可以使用以下jQuery控制旋转木马：

setInterval(function(){ 
  $("[class^='slide']").toggle();
}, 3000);

---

不知怎么的，它是这样工作的。只是试图解决目前的大小调整和响应问题

<div class=" col-md-9 clients side padding-content">
  <div class="client-carousel">
      <div class="container">
            <div class="owl-item">
                <div class="oc-item">
                  <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 > 24 %}
                          {% 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>
                </div>
            </div>
      </div>

      <div class="container">

              <div class="owl-item">
                  <div class="oc-item">
                    <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 > 24 %}
                            {% 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>
                  </div>
              </div>

        </div>




</div>

{%comment%}
`site.data.clients`在`\u data/clients.yml中定义`
{%endcomment%}
{site.data.clients%中的客户端为%s}
{%if-forloop.index>24%}
{%assign slidenum=2%}
{%else%}
{%assign slidenum=1%}
{%endif%}


{%endfor%}


{%comment%}
`site.data.clients`在`\u data/clients.yml中定义`
{%endcomment%}
{site.data.clients%中的客户端为%s}
{%if-forloop.index>24%}
{%assign slidenum=2%}
{%else%}
{%assign slidenum=1%}
{%endif%}


{%endfor%}

---

也许您应该在彼此下方创建其中3个：，并让它们同时移动。这是一个解决方案吗？

<div class=" col-md-9 clients side padding-content">
  <div class="client-carousel">
      <div class="container">
            <div class="owl-item">
                <div class="oc-item">
                  <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 > 24 %}
                          {% 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>
                </div>
            </div>
      </div>

      <div class="container">

              <div class="owl-item">
                  <div class="oc-item">
                    <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 > 24 %}
                            {% 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>
                  </div>
              </div>

        </div>




</div>