如何在轮播中显示 24 个项目 - Jekyll答案

【问题标题】：How to display 24 items in a carousel - Jekyll如何在轮播中显示 24 个项目 - Jekyll
【发布时间】：2017-12-29 22:55:58
【问题描述】：

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

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

到目前为止我已经实现了什么：

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

【问题讨论】：

也许你应该在下面创建三个：owlcarousel2.github.io/OwlCarousel2/demos/responsive.html，并让它们同时移动。这会是一个解决方案吗？

标签： jekyll

【解决方案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);

【讨论】：

【解决方案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>

【讨论】：