我有flexslider 我試圖建立使用這種flexslider該如何在Flexslider的每張幻燈片中顯示6張圖片?
- 對於桌面(窗口屏幕尺寸> = 1200像素),我有一個滑塊上的問題中的每個載片6個horizonttal圖像
- 對於移動或片劑(窗口屏幕尺寸< 1200像素),我的四個圖像中的每個滑動件使得所述四個圖像是在2×2網格總是
這裏是一個示例codepen https://codepen.io/hellouniverse/pen/LLJzgM
我幾乎工作。在移動設備上,我看到2格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
});
});
您好,感謝指出了這一點。 特別是對於手機,你有什麼建議?可以創建一個顯示html結構的codepen嗎? –
你好,我已經更新了我的問題,因爲我幾乎能夠正常工作。但是,現在它在桌面上被打破了。如果你有時間嘗試一下,我會很感激 –
好的工作,我發現桌面上的一切幾乎都可以,對不對? – HuyTran