CODEWITHSUNDEEP
htmlcss
FabricioG
FabricioG

Reputation: 3320

Flexslider thumbnails appear as multiple rows

Currently I have a flex slider that appears like this: enter image description here

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.

Upvotes: 2

Views: 4838

Answers (3)

Troy Myers
Troy Myers

Reputation: 25

I figured it out how to do this. I know this was from 2019 and its 2022 now but it may help others that find there way to this post.

I used the transform:rotate(); to achieve this.

Here's the code that I got to work

.flex-control-nav.flex-control-thumbs{
  flex-direction: column;
  direction: rtl;
  left: 245px;
  top:75%;
  height: 70%;
  overflow-y: scroll;
  overflow-x: hidden;
  width: 125px;
  pointer-events: auto;
  transform:rotate(270deg)
}

.flex-control-nav.flex-control-thumbs img {
  height: auto;
  display:block;
  transform:rotate(90deg)
}

In those sections you retain the scrolling but now its rotated to "LOOK" horizontal. Just keep in mind that everything is the opposite now like width, height, top, bottom, left, right, etc...

Upvotes: 0

Сергей Манюк
Сергей Манюк

Reputation: 13

This is all good. But flex-control-nav flex-control-thumbs doesn't move like this.

http://flexslider.woothemes.com/thumbnail-slider.html

And I do not have the opportunity to create 2 slides. It is necessary that flex-control-thumbs match the currently active image.

And it turns out that yes, flex-control-thumbs is really horizontal, but some flex-control-thumbs will not be visible if there are a lot of pictures.

And you have to scroll through the slider to find the active Well, which has overflow-x: auto; display: flex; flex-wrap: nowrap.

It is not comfortable. It is a pity that the plugin does not have this by default.

Example what I mean https://www.screencast.com/t/JbOReAW22

Upvotes: 0

Vickel
Vickel

Reputation: 8007

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>

Upvotes: 3

Related Questions