Hi, thanks for the module!!! totally awesome!!

I am having one problem with it though, on the big version of the slider (the one used for laptops, desktop, widescreens, etc) the navigation arrows wont show. But if I resize the window, the arrows appear and navigations works ok. I am using the omega theme and have nothing relevant on my default.css file (just some menu navigation tweaks, nothing to do with the body of the page or anything like that).

Is there a way to make this arrows appear?


afoster’s picture

I'm seeing a similar issue. When scaled smaller the flex slider arrow controls appear when the image is below 805px, but above the controls vanish. I'm guessing I've just got something wrong I'm just missing - but a very similar issue to the one @dxiri posted.

I'm using a custom theme built on boron, view block w/ type=flexslider.

deep-silver’s picture

Copy flexslider-container.tpl.php and flexslider_img.css and play with the css. (i hate when modules add css).

minorOffense’s picture

Status: Active » Postponed (maintainer needs more info)

@deep-silver if you don't want the styles to be included, you're more than welcome to disable them using hook_library_alter and hook_css_alter.

The module would have little to no value without at least some default styles ;-)

As for the underlying issue regarding the arrows disappearing, I can't seem to reproduce the problem with Bartik and the default optionset. If you post your optionset here, I'll give it a try.

quickly’s picture

I am using bartik theme... I am having the exact same problem as mentioned in the issue summary.. This problem does not occur with the default option set though... If I edit the default option set, I get the same issue as specified in issue summary. Even If I set back to the original settings, the problem does not go away. But, if I revert back to original default option set, the navigation arrows appear...

ownage’s picture

My arrows were hidden as well.

Looking into this, it looks like a simple CSS mismatch-- the opacity is set to 0 on default.

See if this fixes your issues.

.flex-direction-nav a {
.flex-direction-nav a:hover {
Zuzuesque’s picture

I have the same problem.

The next/previous buttons are missing, but will appear when I resize the browser window. Once I am at ~850px width the buttons will show up. If I resize again to a higher width they vanish once more. Looking at the css which uses :hover to set the opacity I would guess they should only be visible if you hover over the picture (similar to other sliders), yet that doesn't seem to work right now.

The suggestions in #5 works perfectly fine for me - however the buttons will stay visible. For a quick fix that works well enough, but it seems there is something broken with the :hover classes. The odd thing is the controls appear after downsizing, no matter if you hover over the slide or not.

I will look into it some more.

ownage’s picture

I ended up making my own buttons with a hover effect (background position change). Looks great!

Zuzuesque’s picture

That's great :) I actually found the culprint this morning though.

@media screen and (max-width: 1920px) {
  .flex-direction-nav .flex-prev {opacity: 1; left: 0;}
  .flex-direction-nav .flex-next {opacity: 1; right: 0;}

By default the max-width is set to 860px screen width, which is too small for most pc/laptops and they will only print the buttons when you resize the browser. If you change it to 1920 or something you also get the buttons to be always on.

If set right the trait overrides the opacity 0 from .flex-direction-nav a for the appropriate screensizes. So you can in effect set different default visibilities per screen size - I just overlooked it since it was at the end of the file and opacity was noted a couple of times at the beginning of the css.

For everyone who wants controls which only appear if you hover the slider, change:

@media screen and (max-width: 1920px) {
  .flex-direction-nav .flex-prev {opacity: 0; left: 0;} /*opacity when not hovering - default 1*/ 
  .flex-direction-nav .flex-next {opacity: 0; right: 0;} /*opacity when not hovering - default 1*/

.flex-direction-nav a {[...] opacity: 0; }

and add:

.flex-nav-container:hover a {opacity: 0.8;}
.flex-direction-nav:hover a {opacity: 0.8;}

Any opacity above 0 will do, but beneath 0.2 the default controls have a poor visibility.

Optionally if you want the controls to only show on hover for larger screens keep @media screen and (max-width: 860px) as it was and add the two :hover a lines. Then the controls will be always visible for screens with a width of 860 or below and visible on hover for 861 and above.

So not actually a bug, just an odd default value.

David Stosik’s picture

Status: Postponed (maintainer needs more info) » Active

Thanks Zuzuesque, you are right.
Flex Slider default behavior is to hide the arrows (but show them on hover only) when browser is wide enough, or to always show them (and use a nice moving effect on hover) when browser window is smaller.
You can have a look there http://flexslider.woothemes.com/ .
I looked at the HTML produced by Views Slideshow Flex Slider plug-in (I'm not sure all Flex Slider instances in Drupal module share the same problem, as each have its own template file), but it shows a big difference from Flex Slider default HTML (which is the one that works with the library's default CSS): .flex-direction-nav <ul> tag should be inside .flexslider <div>, but it's not. In order to restore the default behavior, use following CSS:

.flex-nav-container {
  overflow: hidden;
.flex-nav-container .flex-next {
  margin-right: 4px;
.flex-nav-container .flex-prev {
  margin-left: 4px;
.flex-nav-container:hover .flex-next {
  opacity: 0.8;
  right: 5px;
.flex-nav-container:hover .flex-prev {
  opacity: 0.8;
  left: 5px;
.flex-nav-container:hover .flex-next:hover,
.flex-nav-container:hover .flex-prev:hover {
  opacity: 1;

The following CSS may also be useful:

.flex-nav-container ul li {
  margin-left: 0;

My guess is that arrows are always shown on smaller resolutions to keep them available on touch devices (the supposition that touch screens have smaller resolution won't live long, though).

I consider this is a bug and the description I wrote above explains why.

Edit: I found a prettier solution:

  1. go to Flex Slider's option set configuration page (admin/config/media/flexslider/edit/default if you only use default one, or fine the others at admin/config/media/flexslider)
  2. click on the "Advanced options" tab
  3. set "Controls container (Advanced)" to .flexslider



smileeman2002’s picture

Awesome Works great!

minorOffense’s picture

Status: Active » Postponed (maintainer needs more info)

Could you post which lines specifically in the views slideshow theme which are generating invalid markup for FlexSlider?

If would probably explain some of the issues I'm running into with the 2.x version and Views Slideshow.

I'd also ensure you're using the right version of FlexSlider with 1.0-rc3. It needs to be FlexSlider 1.8 or earlier. 2.0 changed the API and class names around so you'll fun into interesting issues otherwise.

David Stosik’s picture

It needs to be FlexSlider 1.8 or earlier.

This does not seem to be documented anywhere and FlexSlider library's homepage defaults to FlexSlider 2, so I would advise to write something about that.
If classes changed between both versions, then it would explain why it doesn't work perfectly out of the box. But FlexSlider 2 is a lot cooler, so setting the class in the module's administration sounds like a good workaround.

minorOffense’s picture

Status: Postponed (maintainer needs more info) » Needs work

On the reports page for your site FlexSlider should show an error if the library version is set to 2.0 or higher. I also updated the make file (thanks to a patch from a contributor) to automatically download the right version. Though that isn't in the release version yet.

But you're right, I'll add that to the README for the module to ensure there's less confusion.

Thanks for the feedback!

David Stosik’s picture

I was talking about the project page, too. ;)

mark@redhorseinteractive.com’s picture

David's solutions at end of #9 was a clean fix for me:

go to Flex Slider's option set configuration page (admin/config/media/flexslider/edit/default if you only use default one, or fine the others at admin/config/media/flexslider)
click on the "Advanced options" tab
set "Controls container (Advanced)" to .flexslider

Tweaking CSS from there for any additional requirements should be straight forward from there.

Thanks for that one, David. Never would have figured that out but just randomly messing around.

minorOffense’s picture

I'll see if that should be the default value. I'll have to review the flexslider docs first b

oenie’s picture

I think it should be the default value.
When you check the demos at the flexslider website, you will notice the default CSS is always talking about the hover on an element of the flexslider class:

.flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
.flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}

So if the controls div is added to the flexslider in the Flex slider options set (as mentioned before in posts #9 (at the bottom) and #15, it's fixed.
As an added bonus, it would be in line with the official Flexslider examples. Something which would be preferable if you ask me.

I was debugging the CSS myself and overlooked that fact, assuming the controls div was already inside the flexslider.
David's post (#9) is a clear explanation of what the CSS is meant to do (big screens vs small screens), so be sure to check that out :)

Good find, David !

minorOffense’s picture

Status: Needs work » Closed (won't fix)

I don't really want to be applying any more patches to 1.x unless they're critical bugs. However if you convert that to a patch I'll consider putting it in.

Thanks for all the hard work!

batigol’s picture

Category: Bug report » Support request
Issue summary: View changes
Status: Closed (won't fix) » Active

opacity: 1; fix this. But I have a question. Should the controls resize just like images when you change resolution/resize browser ?