I have a question on flexslider I am trying to build a slider using flexslider such that
Here is a sample codepen https://codepen.io/hellouniverse/pen/LLJzgM
I have it almost working. In mobile, I am seeing 4 images in 2 by 2 grid. However, in desktop, I see 6 images for the first slide. For the subsequent slides, I also expected 6 images like the first ones. However I am seeing all the remaining.
I am slicing it as below and wrapping ul
// Wrap uls
for (var i = 0; i < item.length; i += dataItem) {
item.slice(i, i + dataItem).wrapAll('<ul class="items"></ul>');
}
However, I think I must have made mistake in slicing probably. May someone please see if this can be made such that in desktop we have 6 images horizontally for each slides keeping everything else as it is now.
My html looks like
<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>
and my scss code looks like below
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;
}
}
}
}
And my js looks like below
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
});
});
On desktop versions, I only want to see 6 images.. But I see 6 + 1/2 of 7 sometimes and sometimes 5 and 1/2 of left and right
Maxwidth is 1200px. So if you want to show 6 items, each item will have only 200px
right? But in your css code, you have margin: 20px for each item.That means each item will take 240px.
For 2x2 grid view on Mobile, my solution is you will have a new html structure to show 2 images on each <li>
tag.
This is my demo code: https://codepen.io/anon/pen/qjMRdG
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.