如何在flexslider的每個幻燈片中顯示6張圖像？

Question

我對flexslider有疑問，我正在嘗試使用flexslider構建滑塊，這樣

• 對於台式機（窗口屏幕尺寸> = 1200像素），每張幻燈片中有六個水平圖像
  • 對於移動設備或平板電腦（窗口屏幕尺寸<1200px），每張幻燈片中有四張圖片，因此這四張圖片始終位於2 x 2的網格中

這是一個示例codepen 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的左右

最大寬度為1200像素。 因此，如果要顯示6個項目，則每個項目只有200px像素吧？ 但是在CSS代碼中，您有保證金：每個項目20px，這意味着每個項目將占用240px。

對於Mobile上的2x2網格視圖，我的解決方案是您將擁有一個新的html結構，以在每個<li>標簽上顯示2張圖像。

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