フレックススライダーの各スライドに6枚の画像を表示するには？

Question

私はデスクトップ（> = 1200ピクセルのウィンドウ画面サイズ）のために

• ようflexsliderを使用して、スライダーを構築しようとしていますflexslider に疑問を持って、私はそれぞれのスライドで6つのhorizo​​nttalイメージを持っている
  • モバイルまたはタブレット（ウィンドウ画面サイズ< 1200px）については、私は4枚の画像は、2グリッドによって2になるように各スライドで4枚の画像を有する常に

サンプルコードはこちら https://codepen.io/hellouniverse/pen/LLJzgM

私はそれがほとんど動作しています。モバイルでは、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の時々、時には5と1/2左右

最大幅は1200pxです。ですから、6個のアイテムを表示したい場合は、各アイテムには200pxしかないでしょうか？しかし、あなたのCSSコードでは、余白があります：各項目の20px。つまり、各項目は240pxになります。

モバイル上の2x2グリッド表示の場合、私の解決策は、各<li>タグに2つの画像を表示する新しいhtml構造を使用することです。 https://codepen.io/anon/pen/qjMRdG