Flexslider thumbnails appear as multiple rows
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
1
Currently I have a flex slider that appears like this:
The more pictures I add the more rows the thumbnail area displays. I'd like it to just be one row. This is the default behavior but I'm not sure where I'm going wrong. Here is the css code associated with Flex-control-thumbs
.flex-control-thumbs {
width: 100%;
position: absolute;
bottom: -40px;
text-align: center;
}
.flex-control-thumbs li {
margin: 0 6px;
display: inline-block;
zoom: 1;
*display: inline;
}
.flex-control-thumbs {
position: static;
overflow: hidden;
}
.flex-control-thumbs li,
.flex-control-thumbs li:first-child {
width: 16%;
vertical-align: top;
margin: 15px 5% 0 0;
}
.flex-control-thumbs img {
width: 100%;
display: block;
opacity: .7;
cursor: pointer;
}
.flex-control-thumbs img:hover {
opacity: 1;
}
.flex-control-thumbs .flex-active {
opacity: 1;
cursor: default;
}
.product_slider .flex-active-slide a:hover {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
}I have attempted to change several of the above. Setting height, max-height etc but nothing is working for me. I didn't write this originally I'm inheriting this.
EDIT: Here is the html:
<ol class="flex-control-nav flex-control-thumbs"><li><img src="//blah.jpg?v=1546474879" class="flex-active" draggable="false"></li></ol>
this part just repeats itself for each image.
html css
asked Jan 3 at 22:28
FabricioGFabricioG
431415
add a comment |
1
Currently I have a flex slider that appears like this:
The more pictures I add the more rows the thumbnail area displays. I'd like it to just be one row. This is the default behavior but I'm not sure where I'm going wrong. Here is the css code associated with Flex-control-thumbs
.flex-control-thumbs {
width: 100%;
position: absolute;
bottom: -40px;
text-align: center;
}
.flex-control-thumbs li {
margin: 0 6px;
display: inline-block;
zoom: 1;
*display: inline;
}
.flex-control-thumbs {
position: static;
overflow: hidden;
}
.flex-control-thumbs li,
.flex-control-thumbs li:first-child {
width: 16%;
vertical-align: top;
margin: 15px 5% 0 0;
}
.flex-control-thumbs img {
width: 100%;
display: block;
opacity: .7;
cursor: pointer;
}
.flex-control-thumbs img:hover {
opacity: 1;
}
.flex-control-thumbs .flex-active {
opacity: 1;
cursor: default;
}
.product_slider .flex-active-slide a:hover {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
}I have attempted to change several of the above. Setting height, max-height etc but nothing is working for me. I didn't write this originally I'm inheriting this.
EDIT: Here is the html:
<ol class="flex-control-nav flex-control-thumbs"><li><img src="//blah.jpg?v=1546474879" class="flex-active" draggable="false"></li></ol>
this part just repeats itself for each image.
html css
asked Jan 3 at 22:28
FabricioGFabricioG
431415
Did you inspect the html on this page to see what was happening? It would be interesting to add the html.
– JustCase
Jan 3 at 22:36
html part added @AndersonMendes
– FabricioG
Jan 3 at 22:44
add a comment |
1
1
1
1
Currently I have a flex slider that appears like this:
The more pictures I add the more rows the thumbnail area displays. I'd like it to just be one row. This is the default behavior but I'm not sure where I'm going wrong. Here is the css code associated with Flex-control-thumbs
.flex-control-thumbs {
width: 100%;
position: absolute;
bottom: -40px;
text-align: center;
}
.flex-control-thumbs li {
margin: 0 6px;
display: inline-block;
zoom: 1;
*display: inline;
}
.flex-control-thumbs {
position: static;
overflow: hidden;
}
.flex-control-thumbs li,
.flex-control-thumbs li:first-child {
width: 16%;
vertical-align: top;
margin: 15px 5% 0 0;
}
.flex-control-thumbs img {
width: 100%;
display: block;
opacity: .7;
cursor: pointer;
}
.flex-control-thumbs img:hover {
opacity: 1;
}
.flex-control-thumbs .flex-active {
opacity: 1;
cursor: default;
}
.product_slider .flex-active-slide a:hover {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
}I have attempted to change several of the above. Setting height, max-height etc but nothing is working for me. I didn't write this originally I'm inheriting this.
EDIT: Here is the html:
<ol class="flex-control-nav flex-control-thumbs"><li><img src="//blah.jpg?v=1546474879" class="flex-active" draggable="false"></li></ol>
this part just repeats itself for each image.
html css
asked Jan 3 at 22:28
FabricioGFabricioG
431415
Currently I have a flex slider that appears like this:
The more pictures I add the more rows the thumbnail area displays. I'd like it to just be one row. This is the default behavior but I'm not sure where I'm going wrong. Here is the css code associated with Flex-control-thumbs
.flex-control-thumbs {
width: 100%;
position: absolute;
bottom: -40px;
text-align: center;
}
.flex-control-thumbs li {
margin: 0 6px;
display: inline-block;
zoom: 1;
*display: inline;
}
.flex-control-thumbs {
position: static;
overflow: hidden;
}
.flex-control-thumbs li,
.flex-control-thumbs li:first-child {
width: 16%;
vertical-align: top;
margin: 15px 5% 0 0;
}
.flex-control-thumbs img {
width: 100%;
display: block;
opacity: .7;
cursor: pointer;
}
.flex-control-thumbs img:hover {
opacity: 1;
}
.flex-control-thumbs .flex-active {
opacity: 1;
cursor: default;
}
.product_slider .flex-active-slide a:hover {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
}I have attempted to change several of the above. Setting height, max-height etc but nothing is working for me. I didn't write this originally I'm inheriting this.
EDIT: Here is the html:
<ol class="flex-control-nav flex-control-thumbs"><li><img src="//blah.jpg?v=1546474879" class="flex-active" draggable="false"></li></ol>
this part just repeats itself for each image.
.flex-control-thumbs {
width: 100%;
position: absolute;
bottom: -40px;
text-align: center;
}
.flex-control-thumbs li {
margin: 0 6px;
display: inline-block;
zoom: 1;
*display: inline;
}
.flex-control-thumbs {
position: static;
overflow: hidden;
}
.flex-control-thumbs li,
.flex-control-thumbs li:first-child {
width: 16%;
vertical-align: top;
margin: 15px 5% 0 0;
}
.flex-control-thumbs img {
width: 100%;
display: block;
opacity: .7;
cursor: pointer;
}
.flex-control-thumbs img:hover {
opacity: 1;
}
.flex-control-thumbs .flex-active {
opacity: 1;
cursor: default;
}
.product_slider .flex-active-slide a:hover {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
}.flex-control-thumbs {
width: 100%;
position: absolute;
bottom: -40px;
text-align: center;
}
.flex-control-thumbs li {
margin: 0 6px;
display: inline-block;
zoom: 1;
*display: inline;
}
.flex-control-thumbs {
position: static;
overflow: hidden;
}
.flex-control-thumbs li,
.flex-control-thumbs li:first-child {
width: 16%;
vertical-align: top;
margin: 15px 5% 0 0;
}
.flex-control-thumbs img {
width: 100%;
display: block;
opacity: .7;
cursor: pointer;
}
.flex-control-thumbs img:hover {
opacity: 1;
}
.flex-control-thumbs .flex-active {
opacity: 1;
cursor: default;
}
.product_slider .flex-active-slide a:hover {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
}html css
html css
asked Jan 3 at 22:28
FabricioGFabricioG
431415
asked Jan 3 at 22:28
FabricioGFabricioG
431415
edited Jan 3 at 22:44
FabricioG
asked Jan 3 at 22:28
FabricioGFabricioG
431415
asked Jan 3 at 22:28
FabricioGFabricioG
431415
asked Jan 3 at 22:28
FabricioGFabricioG
431415
431415
Did you inspect the html on this page to see what was happening? It would be interesting to add the html.
– JustCase
Jan 3 at 22:36
html part added @AndersonMendes
– FabricioG
Jan 3 at 22:44
add a comment |
Did you inspect the html on this page to see what was happening? It would be interesting to add the html.
– JustCase
Jan 3 at 22:36
html part added @AndersonMendes
– FabricioG
Jan 3 at 22:44
Did you inspect the html on this page to see what was happening? It would be interesting to add the html.
– JustCase
Jan 3 at 22:36
Did you inspect the html on this page to see what was happening? It would be interesting to add the html.
– JustCase
Jan 3 at 22:36
html part added @AndersonMendes
– FabricioG
Jan 3 at 22:44
html part added @AndersonMendes
– FabricioG
Jan 3 at 22:44
add a comment |
1 Answer
1
active
oldest
votes
3
You need to make sure, that your images are displayed in one row only. Use the flexbox model to achieve this, it's a css standard:
what's new?: in code .flex-control-thumbs I changed/added:
display:flex; flex-wrap:nowrap;: all image items a placed in the same row
overflow-x:auto;: makes sure you have a horizontal scroll bar if needed
code .flex-control-thumbs {
width: 90%;
position: absolute;
bottom: -40px;
text-align: center;
display:flex;
flex-wrap:nowrap;
border: 1px solid red;
overflow-x:auto;
padding-bottom:30px;
}
here is working example:
.flex-control-thumbs {
width: 90%;
position: absolute;
bottom: 0px;
text-align: center;
display:flex;
flex-wrap:nowrap;
border: 1px solid red;
overflow-x:auto;
padding-bottom:10px;
}
.flex-control-thumbs li {
margin: 0 6px;
display: inline-block;
zoom: 1;
}
.flex-control-thumbs li,
.flex-control-thumbs li:first-child {
width: 16%;
vertical-align: top;
margin: 15px 5% 0 0;
min-width:100px;
}
.flex-control-thumbs img {
width: 100%;
display: block;
opacity: .7;
cursor: pointer;
}
.flex-control-thumbs img:hover {
opacity: 0.5;
}
.flex-control-thumbs .flex-active {
opacity: 1;
cursor: default;
}
.product_slider .flex-active-slide a:hover {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
}<ol class="flex-control-nav flex-control-thumbs">
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
</ol>answered Jan 4 at 0:12
VickelVickel
3,79742447
Excelelnt answer, one problem for me on my end. The overflow appears in mobile device but not on desktop Chrome browser. Just FYI. Not really important to me so I"ll mark it as correct any how. @Vickel
– FabricioG
Jan 4 at 0:34
I've checked in chrome on desktop with this jsfiddle: jsfiddle.net/6ahgrpqt maybe you have not added the amount of images needed to overflow?
– Vickel
Jan 4 at 0:39
It works! Does anybody know how to add navigation arrows to flex-control-thumbs list, such as this "Slider with Carousel Slider as Navigation" example? flexslider.woothemes.com/thumbnail-slider.html
– retroriff
Mar 13 at 12:57
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54030676%2fflexslider-thumbnails-appear-as-multiple-rows%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
3
You need to make sure, that your images are displayed in one row only. Use the flexbox model to achieve this, it's a css standard:
what's new?: in code .flex-control-thumbs I changed/added:
display:flex; flex-wrap:nowrap;: all image items a placed in the same row
overflow-x:auto;: makes sure you have a horizontal scroll bar if needed
code .flex-control-thumbs {
width: 90%;
position: absolute;
bottom: -40px;
text-align: center;
display:flex;
flex-wrap:nowrap;
border: 1px solid red;
overflow-x:auto;
padding-bottom:30px;
}
here is working example:
.flex-control-thumbs {
width: 90%;
position: absolute;
bottom: 0px;
text-align: center;
display:flex;
flex-wrap:nowrap;
border: 1px solid red;
overflow-x:auto;
padding-bottom:10px;
}
.flex-control-thumbs li {
margin: 0 6px;
display: inline-block;
zoom: 1;
}
.flex-control-thumbs li,
.flex-control-thumbs li:first-child {
width: 16%;
vertical-align: top;
margin: 15px 5% 0 0;
min-width:100px;
}
.flex-control-thumbs img {
width: 100%;
display: block;
opacity: .7;
cursor: pointer;
}
.flex-control-thumbs img:hover {
opacity: 0.5;
}
.flex-control-thumbs .flex-active {
opacity: 1;
cursor: default;
}
.product_slider .flex-active-slide a:hover {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
}<ol class="flex-control-nav flex-control-thumbs">
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
</ol>answered Jan 4 at 0:12
VickelVickel
3,79742447
Excelelnt answer, one problem for me on my end. The overflow appears in mobile device but not on desktop Chrome browser. Just FYI. Not really important to me so I"ll mark it as correct any how. @Vickel
– FabricioG
Jan 4 at 0:34
I've checked in chrome on desktop with this jsfiddle: jsfiddle.net/6ahgrpqt maybe you have not added the amount of images needed to overflow?
– Vickel
Jan 4 at 0:39
It works! Does anybody know how to add navigation arrows to flex-control-thumbs list, such as this "Slider with Carousel Slider as Navigation" example? flexslider.woothemes.com/thumbnail-slider.html
– retroriff
Mar 13 at 12:57
add a comment |
3
You need to make sure, that your images are displayed in one row only. Use the flexbox model to achieve this, it's a css standard:
what's new?: in code .flex-control-thumbs I changed/added:
display:flex; flex-wrap:nowrap;: all image items a placed in the same row
overflow-x:auto;: makes sure you have a horizontal scroll bar if needed
code .flex-control-thumbs {
width: 90%;
position: absolute;
bottom: -40px;
text-align: center;
display:flex;
flex-wrap:nowrap;
border: 1px solid red;
overflow-x:auto;
padding-bottom:30px;
}
here is working example:
.flex-control-thumbs {
width: 90%;
position: absolute;
bottom: 0px;
text-align: center;
display:flex;
flex-wrap:nowrap;
border: 1px solid red;
overflow-x:auto;
padding-bottom:10px;
}
.flex-control-thumbs li {
margin: 0 6px;
display: inline-block;
zoom: 1;
}
.flex-control-thumbs li,
.flex-control-thumbs li:first-child {
width: 16%;
vertical-align: top;
margin: 15px 5% 0 0;
min-width:100px;
}
.flex-control-thumbs img {
width: 100%;
display: block;
opacity: .7;
cursor: pointer;
}
.flex-control-thumbs img:hover {
opacity: 0.5;
}
.flex-control-thumbs .flex-active {
opacity: 1;
cursor: default;
}
.product_slider .flex-active-slide a:hover {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
}<ol class="flex-control-nav flex-control-thumbs">
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
</ol>answered Jan 4 at 0:12
VickelVickel
3,79742447
Excelelnt answer, one problem for me on my end. The overflow appears in mobile device but not on desktop Chrome browser. Just FYI. Not really important to me so I"ll mark it as correct any how. @Vickel
– FabricioG
Jan 4 at 0:34
I've checked in chrome on desktop with this jsfiddle: jsfiddle.net/6ahgrpqt maybe you have not added the amount of images needed to overflow?
– Vickel
Jan 4 at 0:39
It works! Does anybody know how to add navigation arrows to flex-control-thumbs list, such as this "Slider with Carousel Slider as Navigation" example? flexslider.woothemes.com/thumbnail-slider.html
– retroriff
Mar 13 at 12:57
add a comment |
3
3
3
You need to make sure, that your images are displayed in one row only. Use the flexbox model to achieve this, it's a css standard:
what's new?: in code .flex-control-thumbs I changed/added:
display:flex; flex-wrap:nowrap;: all image items a placed in the same row
overflow-x:auto;: makes sure you have a horizontal scroll bar if needed
code .flex-control-thumbs {
width: 90%;
position: absolute;
bottom: -40px;
text-align: center;
display:flex;
flex-wrap:nowrap;
border: 1px solid red;
overflow-x:auto;
padding-bottom:30px;
}
here is working example:
.flex-control-thumbs {
width: 90%;
position: absolute;
bottom: 0px;
text-align: center;
display:flex;
flex-wrap:nowrap;
border: 1px solid red;
overflow-x:auto;
padding-bottom:10px;
}
.flex-control-thumbs li {
margin: 0 6px;
display: inline-block;
zoom: 1;
}
.flex-control-thumbs li,
.flex-control-thumbs li:first-child {
width: 16%;
vertical-align: top;
margin: 15px 5% 0 0;
min-width:100px;
}
.flex-control-thumbs img {
width: 100%;
display: block;
opacity: .7;
cursor: pointer;
}
.flex-control-thumbs img:hover {
opacity: 0.5;
}
.flex-control-thumbs .flex-active {
opacity: 1;
cursor: default;
}
.product_slider .flex-active-slide a:hover {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
}<ol class="flex-control-nav flex-control-thumbs">
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
</ol>answered Jan 4 at 0:12
VickelVickel
3,79742447
You need to make sure, that your images are displayed in one row only. Use the flexbox model to achieve this, it's a css standard:
what's new?: in code .flex-control-thumbs I changed/added:
display:flex; flex-wrap:nowrap;: all image items a placed in the same row
overflow-x:auto;: makes sure you have a horizontal scroll bar if needed
code .flex-control-thumbs {
width: 90%;
position: absolute;
bottom: -40px;
text-align: center;
display:flex;
flex-wrap:nowrap;
border: 1px solid red;
overflow-x:auto;
padding-bottom:30px;
}
here is working example:
.flex-control-thumbs {
width: 90%;
position: absolute;
bottom: 0px;
text-align: center;
display:flex;
flex-wrap:nowrap;
border: 1px solid red;
overflow-x:auto;
padding-bottom:10px;
}
.flex-control-thumbs li {
margin: 0 6px;
display: inline-block;
zoom: 1;
}
.flex-control-thumbs li,
.flex-control-thumbs li:first-child {
width: 16%;
vertical-align: top;
margin: 15px 5% 0 0;
min-width:100px;
}
.flex-control-thumbs img {
width: 100%;
display: block;
opacity: .7;
cursor: pointer;
}
.flex-control-thumbs img:hover {
opacity: 0.5;
}
.flex-control-thumbs .flex-active {
opacity: 1;
cursor: default;
}
.product_slider .flex-active-slide a:hover {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
}<ol class="flex-control-nav flex-control-thumbs">
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
</ol>.flex-control-thumbs {
width: 90%;
position: absolute;
bottom: 0px;
text-align: center;
display:flex;
flex-wrap:nowrap;
border: 1px solid red;
overflow-x:auto;
padding-bottom:10px;
}
.flex-control-thumbs li {
margin: 0 6px;
display: inline-block;
zoom: 1;
}
.flex-control-thumbs li,
.flex-control-thumbs li:first-child {
width: 16%;
vertical-align: top;
margin: 15px 5% 0 0;
min-width:100px;
}
.flex-control-thumbs img {
width: 100%;
display: block;
opacity: .7;
cursor: pointer;
}
.flex-control-thumbs img:hover {
opacity: 0.5;
}
.flex-control-thumbs .flex-active {
opacity: 1;
cursor: default;
}
.product_slider .flex-active-slide a:hover {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
}<ol class="flex-control-nav flex-control-thumbs">
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
</ol>.flex-control-thumbs {
width: 90%;
position: absolute;
bottom: 0px;
text-align: center;
display:flex;
flex-wrap:nowrap;
border: 1px solid red;
overflow-x:auto;
padding-bottom:10px;
}
.flex-control-thumbs li {
margin: 0 6px;
display: inline-block;
zoom: 1;
}
.flex-control-thumbs li,
.flex-control-thumbs li:first-child {
width: 16%;
vertical-align: top;
margin: 15px 5% 0 0;
min-width:100px;
}
.flex-control-thumbs img {
width: 100%;
display: block;
opacity: .7;
cursor: pointer;
}
.flex-control-thumbs img:hover {
opacity: 0.5;
}
.flex-control-thumbs .flex-active {
opacity: 1;
cursor: default;
}
.product_slider .flex-active-slide a:hover {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
}<ol class="flex-control-nav flex-control-thumbs">
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
<li>
<img src="https://via.placeholder.com/150" class="flex-active" draggable="false">
</li>
</ol>answered Jan 4 at 0:12
VickelVickel
3,79742447
edited Jan 4 at 0:19
answered Jan 4 at 0:12
VickelVickel
3,79742447
answered Jan 4 at 0:12
VickelVickel
3,79742447
answered Jan 4 at 0:12
VickelVickel
3,79742447
3,79742447
Excelelnt answer, one problem for me on my end. The overflow appears in mobile device but not on desktop Chrome browser. Just FYI. Not really important to me so I"ll mark it as correct any how. @Vickel
– FabricioG
Jan 4 at 0:34
I've checked in chrome on desktop with this jsfiddle: jsfiddle.net/6ahgrpqt maybe you have not added the amount of images needed to overflow?
– Vickel
Jan 4 at 0:39
It works! Does anybody know how to add navigation arrows to flex-control-thumbs list, such as this "Slider with Carousel Slider as Navigation" example? flexslider.woothemes.com/thumbnail-slider.html
– retroriff
Mar 13 at 12:57
add a comment |
Excelelnt answer, one problem for me on my end. The overflow appears in mobile device but not on desktop Chrome browser. Just FYI. Not really important to me so I"ll mark it as correct any how. @Vickel
– FabricioG
Jan 4 at 0:34
I've checked in chrome on desktop with this jsfiddle: jsfiddle.net/6ahgrpqt maybe you have not added the amount of images needed to overflow?
– Vickel
Jan 4 at 0:39
It works! Does anybody know how to add navigation arrows to flex-control-thumbs list, such as this "Slider with Carousel Slider as Navigation" example? flexslider.woothemes.com/thumbnail-slider.html
– retroriff
Mar 13 at 12:57
Excelelnt answer, one problem for me on my end. The overflow appears in mobile device but not on desktop Chrome browser. Just FYI. Not really important to me so I"ll mark it as correct any how. @Vickel
– FabricioG
Jan 4 at 0:34
Excelelnt answer, one problem for me on my end. The overflow appears in mobile device but not on desktop Chrome browser. Just FYI. Not really important to me so I"ll mark it as correct any how. @Vickel
– FabricioG
Jan 4 at 0:34
I've checked in chrome on desktop with this jsfiddle: jsfiddle.net/6ahgrpqt maybe you have not added the amount of images needed to overflow?
– Vickel
Jan 4 at 0:39
I've checked in chrome on desktop with this jsfiddle: jsfiddle.net/6ahgrpqt maybe you have not added the amount of images needed to overflow?
– Vickel
Jan 4 at 0:39
It works! Does anybody know how to add navigation arrows to flex-control-thumbs list, such as this "Slider with Carousel Slider as Navigation" example? flexslider.woothemes.com/thumbnail-slider.html
– retroriff
Mar 13 at 12:57
It works! Does anybody know how to add navigation arrows to flex-control-thumbs list, such as this "Slider with Carousel Slider as Navigation" example? flexslider.woothemes.com/thumbnail-slider.html
– retroriff
Mar 13 at 12:57
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54030676%2fflexslider-thumbnails-appear-as-multiple-rows%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Did you inspect the html on this page to see what was happening? It would be interesting to add the html.
– JustCase
Jan 3 at 22:36
html part added @AndersonMendes
– FabricioG
Jan 3 at 22:44