如何在挠性滑块的每一张幻灯片中显示6幅图像？
如何在挠性滑块的每一张幻灯片中显示6幅图像？
提问于 2017-07-07 06:14:37
我有一个关于柔性滑块的问题，我正试图用柔性滑块来构建一个滑块
- 对于桌面(窗口屏幕大小为>= 1200 px)，我在每个幻灯片中都有6个水平图像。
- 对于移动或平板电脑(窗口屏幕大小<1200 in )，我在每张幻灯片中有4张图像，因此这4幅图像总是在2×2的网格中。
下面是一个代码依赖的示例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
});
});回答 1
Stack Overflow用户
发布于 2017-07-07 07:00:42
在桌面版本中，我只想看到6张图片。但我看到6+ 1/2的7，有时是5和1/2的左右
最大宽度为1200 is。因此，如果您想显示6个项目，每个项目将只有200px对吗？但是在您的css代码中，您有页边距:对于每个item.That，20 in意味着每一项将占用240 in。
对于移动上的2x2网格视图，我的解决方案是使用一个新的html结构在每个<li>标记上显示2个图像。
这是我的演示代码：https://codepen.io/anon/pen/qjMRdG
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44963733
复制相关文章
相似问题
腾讯云开发者
