如何在flexslider的每张幻灯片中显示6张图片？

Question

我有一个关于 flexslider 的问题 我正在尝试使用 flexslider 构建一个滑块，这样

• 对于桌面（窗口屏幕尺寸 >= 1200 像素），我在每张幻灯片中有六个水平图像
  • 对于移动设备或平板电脑（窗口屏幕尺寸

这是一个示例代码笔 https://codepen.io/hellouniverse/pen/LLJzgM

我几乎可以正常工作了。在移动设备中，我看到 2 x 2 网格中的 4 张图像。但是，在桌面上，我看到第一张幻灯片有 6 张图像。对于随后的幻灯片，我还希望有 6 张像第一张一样的图片。但是我看到了所有剩余的。

我将它切片如下并包装 ul

// Wrap uls
for (var i = 0; i < item.length; i += dataItem) {
  item.slice(i, i + dataItem).wrapAll('<ul class="items"></ul>');
} 

但是，我想我可能在切片时犯了错​​误。请有人看看这是否可以做到，在桌面上我们为每张幻灯片水平放置 6 张图像，保持其他所有内容不变。

我的 html 看起来像

<div id="flexslider" class="flexslider" data-item="4">
  <ul class="slides">
    <li class="item"> <img src="http://placehold.it/1200x600" alt="placeholder image"></li>
    <li class="item"> <img src="http://placehold.it/1200x600" alt="placeholder image"></li>
    <li class="item"> <img src="http://placehold.it/1200x600" alt="placeholder image"></li>
    <li class="item"> <img src="http://placehold.it/1200x600" alt="placeholder image"></li>
    <li class="item"> <img src="http://placehold.it/1200x600" alt="placeholder image"></li>
    <li class="item"> <img src="http://placehold.it/1200x600" alt="placeholder image"></li>
    <li class="item"> <img src="http://placehold.it/1200x600" alt="placeholder image"></li>
    <li class="item"> <img src="http://placehold.it/1200x600" alt="placeholder image"></li>
    <li class="item"> <img src="http://placehold.it/1200x600" alt="placeholder image"></li>
    <li class="item"> <img src="http://placehold.it/1200x600" alt="placeholder image"></li>
    <li class="item"> <img src="http://placehold.it/1200x600" alt="placeholder image"></li>
    <li class="item"> <img src="http://placehold.it/1200x600" alt="placeholder image"></li>
    <li class="item"> <img src="http://placehold.it/1200x600" alt="placeholder image"></li>
    <li class="item"> <img src="http://placehold.it/1200x600" alt="placeholder image"></li>
    <li class="item"> <img src="http://placehold.it/1200x600" alt="placeholder image"></li>
    <li class="item"> <img src="http://placehold.it/1200x600" alt="placeholder image"></li>
    <li class="item"> <img src="http://placehold.it/1200x600" alt="placeholder image"></li>
    <li class="item"> <img src="http://placehold.it/1200x600" alt="placeholder image"></li>    
  </ul>
</div>

我的 scss 代码如下所示

ul,
li {
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 1199px) {
  .flexslider {
      .slides {
          .items {
              display: flex !important;
              flex-wrap: wrap !important;

              item {
                  border: 1px solid red;
              }
          }

          .item {
              background: #ccc;
              margin: 10px;
              padding: 5px;
              text-align: center;
              flex-basis: calc(50% - 40px);
              /* Need to tweak!*/
              list-style-type: none;
          }
      }
  }
}

@media screen and (min-width: 1200px) {
  .flexslider {
      .slides {
          .items {
              display: flex !important;
              //flex-wrap: wrap !important;
              item {
                  border: 1px solid red;
              }
          }

          .item {
              background: #ccc;
              margin: 10px;
              padding: 5px;
              text-align: center;
              flex-basis: calc(100% / 6);
              /* Need to tweak!*/
              list-style-type: none;
          }
      }
  }
}

我的 js 如下所示

var fs = $(".flexslider"),
  dataItem = fs.data("item"),
  item = fs.find(".item");

//console.log('item', item.length);

//var dataItem = $(".flexslider").attr("data-type");
if ($(window).width() >= 1200) {
  var el = document.getElementById("flexslider");
  el.setAttribute("data-item", "6");
  dataItem = el.getAttribute("data-item");
}

console.log('dataItem', dataItem);
console.log('length of item', item.length);

// Wrap uls
for (var i = 0; i < item.length; i += dataItem) {
  item.slice(i, i + dataItem).wrapAll('<ul class="items"></ul>');
}

// Initialize flexslider
$(window).load(function() {
  fs.flexslider({
    selector: ".slides > .items",
    animation: "slide",
    animationLoop: false,
    directionNav: true,
    slideshow: false,
    smoothHeight: true,
    itemMargin: 0,
    minItems: 1,
    maxItems: 1
  });
});

Answer 1

在桌面版本上，我只想看到 6 张图片。但我有时会看到 6 + 1/2 of 7，有时会看到 5 和 1/2 of 左右

最大宽度为 1200 像素。所以如果你想显示 6 个项目，每个项目将只有 200px 对吗？但是在您的 css 代码中，您有 margin: 20px for each item。这意味着每个项目将占用 240px。

对于移动设备上的 2x2 网格视图，我的解决方案是您将拥有一个新的 html 结构，以在每个 <li> 标记上显示 2 个图像。

这是我的演示代码：https://codepen.io/anon/pen/qjMRdG