如何在旋转木马中显示24项 - 杰基尔

Question

我正在一个项目工作，目前我有一个数据文件，在一个页面中显示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 %}

我想实现一个在一张幻灯片中显示12个项目的轮播（当点击箭头时）显示其他12个项目。

"Two slides with 12 elements each"

我试图在猫头鹰旋转木马中实现它，但不知何故，我将所有项目插入到第一张幻灯片的第一个元素中。仍然试图找到一种方法来分割两张幻灯片中的所有元素，如图片。

到目前为止我实施的内容：

            <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>

Answer 1

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

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

这个css：

.slide2 {display:none;}

您可以使用以下jQuery控制轮播：

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

Answer 2

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

<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>