I'm using FlexSlider on an image field containing multiple images.

Versions:
Drupal: 7.41
Default JQuery: 1.4.4 (tried changing JQuery version, didn't help)
Flexslider: 2.4.0 (but I tried them all, from 2.2.0 up to 2.6.0)
Theme: Zircon

Problem:
Flexslider is not displayed.

No errors are shown in the console.

When I check the HTML in firebug, the individual images are there, wrapped in li tags, but their visibility is set to none by flexslider.css

please help?

Comments

manarak created an issue. See original summary.

webmaster.mfo’s picture

I have the same issue.

minorOffense’s picture

Can you provide a link to the site in question? Can't debug without seeing the site.

sponcec3’s picture

For what it's worth : I was having the same issue, and looking carefully at the javascript console, I found out that there was a syntax error in qtip.js, loaded from the minipanel module.
As I was actually not using minipanels at the end, I disabled that module and everything was fixed.
So check for javascript errors in your console

amaria’s picture

Status: Active » Postponed (maintainer needs more info)
docans’s picture

I am having the same issue. It is still not working.

amaria’s picture

@manarak I tried the same thing with the same Zircon theme and was able to see the flexslider field. My flexslider version is 7.x-2.x-dev. Try the dev version to see if that works for you.

@docans we need more information in order to debug. Give as much detail as you can about what you tried and/or provide a link.

DrupalDope’s picture

actually, I had moved on from flexslider already.

I'll try to reinstall it and replicate the issue when I have time

videographics’s picture

Clearing caches resolved this for me.

WiredEscape’s picture

I found I had to install Entity API & File Entity modules to get Flexslider to display images. The flexslider div's were there but img html was missing. Had Flexslider working on 2 other sites with exact same config without issue and only difference was Entity API & File Entity modules where not enabled on problematic site...

Drupal: 7.43
Flexslider: 2.6.0
Flexslider 7.x-2.x-dev (2016-feb-18)
Flexslider Views Slideshow: 2.x-dev (2013-sep-30)
Entity API 1.7
File Entity: 2.0-beta2

TechnoTim2010’s picture

Drupal: 7.43
Flexslider: 2.6.0
Flexslider 7.x-2.x-dev (2016-feb-18)
Entity API 7.1.7
File Entity 7.x.2.Beta

But I am using a subtheme of Adaptive theme and it is not working. Switch to Bartik and it works fine.

The issue as reported above according to my inspection of the css is that

.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
}
Making display:block; shows the images and captions but not as a slideshow.
there is no theme specific css overriding the flexslider css (this site has very little custom CSS anyway.

Not sure how to debug this to provide more information.
You can have a look yourself at http://stourvalleycycling.net/route-slidehow/13 and suggest any changes, site is not really live yet.

regards

Tim

TechnoTim2010’s picture

OK I have sussed the problem

So this code in flexslider.theme.inc

function theme_flexslider_list_item(&$variables) {
  return '<li' . drupal_attributes($variables['settings']['attributes']) . '>' . $variables['item'] . $variables['caption'] . "</li>\n";
}

should replace the following css

.flexslider .slides > li {
	display: none;
	-webkit-backface-visibility: hidden;
}

with something like this

element {
	width: 100%;
	float: left;
	margin-right: -100%;
	position: relative;
	opacity: 0;
	display: block;
	z-index: 1;
}

But for some reason this is not happening.

I will try and debug further to see what is the cause. Can someone with the same issue using Zircon theme check they have similar issues.

Regards

Tim

Vincent_Jo’s picture

Hi,

same issue here after update drupal core from 7.41 to 7.44.
Flexslider (7.x-2.0-rc1...update: also 7.x-2.x-dev) not displaying anymore.
Strange: restore Backup didn´t help.
Theme: adaptive(sub)theme.
As mentioned at #11:

.flexslider .slides > li {
    display: block;
}

shows up the images, but no slider.
At standard themes the slider works.

regards
Vincent

update: deleting the view completely and building it up again brought back the slider display.

TechnoTim2010’s picture

I fixed it.

Using jquery update I dropped the jquery version down to 1.8 and the slideshow works. Jquery version was 1.9

Clearly something goes a bit awry with higher versions

erjuni’s picture

@TechnoTim2010 I am having the exact same problem as you on #12 ('li' is set to display: none). The difference is that I am on Drupal 8.1.8 (and with Zircon theme, same with the original poster in this issue). I have updated Flexslider to the latest version (8.x-2.x-dev - 2016-Aug-09).

Some more details on my particular issue:
There are three Flexslider-based sliders on the same page, only one of them is affected by this (all use different optionsets). The other two have zero problem. The one having the problem is a manually controlled carousel of images (no automatic slides).
After a cache flush, sometimes the missing slider shows back up, only a few hours later (my suspicion, after a scheduled cron) it disappears again (display: none)
This missing slider error is experienced differently on authorized vs. anonymous users. In general, authorized users seemed to always get the sliders to show up after a cache flush. Not so with anonymous users.
Changing something about the slider (its setting in the optionset, move slider to a different block, changing something in the view, etc.) sometimes trigger the slider to show up, but not always.

As you can see, the inconsistencies of the problem make it so hard to troubleshoot. I didn't even realize that this is happening because early on in development I flush the cache manually often, and the error affects anonymous users the most.

It's probably better for me to create a separate issue for this, especially because I am on Drupal 8, but reading the comments and seeing how similar others experiences are, I thought I'd chime in here first.

TechnoTim2010’s picture

@erjuni
This clearly has to be a javascript issue.

In my instance dropping the jquery version fixed it, I am therefore unsurprised that you are seeing this issue in Drupal 8 as the jquery version (out of the box as it were) is too high. It is also clearly difficult to debug and it seems in D8 is erratic in appearing.

This is a bug that needs a jquery guru fix.

Any takers?

Tim

djowright’s picture

I updated from version 7.x.-1.0-rc3 to 7.x-2.0-rc1 by first uninstalling the old and installing the new. I had tons of dependencies that I had to disable before I could uninstall. Also replaced the library files.

Now my images are not showing. The nodeblock is there, the slideshow title is there, but my images are not. The images DO show when viewing the source code. I've tried about everything everyone has mentioned, but still no images.

I am not good at the backend stuff, but I can follow step-by-step instructions. At this point I'm desperate.

Thank you!

drupal_simply_amazing’s picture

Please try the dev version. It works on my end.

mildok’s picture

dev version of Drupal, flexslider or theme?

mildok’s picture

Founded at least.

This bug is very old:
https://www.drupal.org/node/1420924#comment-6076176

Solution I found at here:
https://www.drupal.org/node/1420924#comment-11566529

Zircon, flexslider, Drupal 8 is the best. =)

amaria’s picture

Status: Postponed (maintainer needs more info) » Closed (works as designed)

The original reporter no longer using. All others, please use the latest version of the FlexSlider library for higher versions of jQuery. If any other problems, create a new issue.

wavesailor’s picture

It's seems it is a loading of JavaScript error.

To solve this I used this solution here

Martin Joergensen’s picture

Odd problem with random sorting:

Using Drupal 9.3.6 and FlexSlider 8.x-2.0 I had a slider that worked perfectly, and suddenly didn't. It proved to be sort of my own fault. I set Views to sort the slides randomly, and that obviously broke the sliding function. Nothing was showing in my block on the page, although the Views preview worked perfectly. Removing the random sort again revived the slider.

The FlexSlider module itself has a "Randomize Slide Order" setting in the optionset settings, and that randomizes the slides with no hassle.

I noticed that the id of the slider div changed from #flexslider-1 to #flexslider-2 when I added the Views sort, and back again to #flexslider-1 when I removed it. This might be what caused the problem... no idea if or why.

Odd problem, but fixed in my case. This might help others.

Martin

cookseyc’s picture

@Martin Joergensen - I'm running into a similar issue. I'm on Drupal 9.3.9, FlexSlider 8.x-2.0, and until sometime in the last couple weeks it was working just fine. Then it suddenly stopped. I'm not using the "Randomize Slide Order" option. Was there anything else you changed that may have fixed it?

Martin Joergensen’s picture

@cookseyc,

No, that was all it took. It required a little guessing and probing, but solved my problem. Unfortunately it's typically pretty work intensive to find these errors since both Views and Flexslider are pretty complex and hard to wrap your head around.

I stepped back in the development iterations of my View and found out that the random sorting was the trigger, and that was my lucky punch. If nothing was changed in your View, it's probably hard to find the cause.

Martin

cookseyc’s picture

It appears as though the problem is that on any page that isn't the front page, the optionset for my slideshow is not added to the settings/flexslider object. I don't know if that helps clarify the issue, but I imagine that's a factor.