6 replies · opened Jul 12, 2021
How to control the number of thumbs that has to be shown under the image? I think the Docu: http://docs.semicolonweb.com/docs/shortcodes/responsive-slider/ is not actual anymore? The flex-thumb-grid grid-6 classes are no working anymore... How to allow a number of thumbs per device-width? Or thumb pagination?
Hello,
Apologies for the Inconveniences caused!
Please replace the entire section related to .flex-thumb-grid Classes with the following code:
[ch_pre type="css"]/* FlexSlider: Thumbs - Flexible
-----------------------------------------------------------------*/
.fslider.flex-thumb-grid .flex-control-nav.flex-control-thumbs {
margin: 2px -2px -2px 0;
height: auto;
display: flex;
flex-wrap: wrap;
}
.fslider.flex-thumb-grid .flex-control-nav.flex-control-thumbs li {
flex-shrink: 0;
flex: 0 0 auto;
max-width: 100%;
height: auto !important;
margin: 0;
padding: 0 2px 2px 0;
}
.fslider.flex-thumb-grid .flex-control-nav.flex-control-thumbs li {
width: 25% !important;
}
.fslider.flex-thumb-grid.grid-3 .flex-control-nav.flex-control-thumbs li {
width: 33.333333% !important;
}
.fslider.flex-thumb-grid.grid-5 .flex-control-nav.flex-control-thumbs li {
width: 20% !important;
}
.fslider.flex-thumb-grid.grid-6 .flex-control-nav.flex-control-thumbs li {
width: 16.666666% !important;
}
.fslider.flex-thumb-grid.grid-8 .flex-control-nav.flex-control-thumbs li {
width: 12.5% !important;
}
.fslider.flex-thumb-grid.grid-10 .flex-control-nav.flex-control-thumbs li {
width: 10% !important;
}
.fslider.flex-thumb-grid.grid-12 .flex-control-nav.flex-control-thumbs li {
width: 8.333333% !important;
}
.fslider.flex-thumb-grid .flex-control-nav.flex-control-thumbs li img {
width: 100% !important;
height: auto !important;
}[/ch_pre]
This will definitely fix the issue. Hope this Helps! An Update will be released shortly to address this.
Let us know if we can help you with anything else or if you find any further issues.
Ok, thank you.
But it's not possible to activate the "thumb sliding control" of the original flexslider: http://flexslider.woothemes.com/thumbnail-slider.html So that the thumbs are always in only ONE row!? (Even if more than the "flex-grid")
Or is it possible?
Or should the data-pagi="true" handle this?? If yes, than this even does not work.
Hello,
The Thumb-Sliding/Carousel control is currently not supported while using the Thumbs Grid. Thumbs Grid only aligns the images in a grid according to the available area and then wraps to the next line.
To use Flex Slider with Carousel Thumbs, custom JS must be used. We already have a Template to achieve this effect: https://themes.semicolonweb.com/html/canvas/flex-with-carousel-thumbs.html . You will need to use the JS Codes added at the bottom of the Page.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Very very cool! Thank you.
Best theme. Best support.
Thanks so much for the Kind Words! Very happy to help! :)
Please do let us know if we can help you with anything else or if you find any further issues with Canvas.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard