Enabled:
- FlexSlider
- FlexSlider Fields
- FlexSlider Views Style

I have a strange issue whereby FlexSlider does not build correctly (at all) on Views page. Drupal is outputting the div | ul | li content correctly (the images, etc.), but FlexSlider does not seem to append the rest of the content.

I have noticed that FlexSlider works perfectly in the Views edit section (preview):

Views preview

<div class="preview-section">
  <div id="flexslider-1" class="flexslider flexslider-processed">
    <div class="flex-viewport" style="overflow: hidden; position: relative;">
      <ul class="slides" style="width: 1200%; margin-left: -1980.7016666666666px;">
        <li class="clone" aria-hidden="true" style="width: 1469px; float: left; display: block;">........</li>
        ........
      </ul>
    </div>
  </div>
</div>

But does not work at all in the actual rendered page

Page output

<div class="view-content">
  <div id="flexslider-1" class="flexslider">
    <ul class="slides">
      <li>........</li>
      ........
    </ul>
  </div>
</div>

Notice the missing classes and <div class="flex-viewport" style="overflow: hidden; position: relative;">

The JS is being loaded:
jquery.flexslider.js GET 200
flexslider.load.js GET 200

I have the View set up as:
- View
- Page
- Format > FlexSlider (default option set)
- Type > Fields
- Content: Type (= Slideshow Content)

Again, it does build and work perfectly when previewing the View during Edit - but not when displaying the actual View Page.

Comments

kaipee_s2s’s picture

kaipee_s2s commented
Title: flex-viewport not being generating » flex-viewport not being generated
kaipee_s2s’s picture

kaipee_s2s commented

Additional Info

I have just noticed that the Block associated to this FlexSlider View (I created both a Page and Block) is causing issues with other scripts on my site.

When I enabled the block and displayed it on the front page, my other carousel does not display (the site uses another script from ThemePunch as a 'featured items' carousel).

Chrome Dev is showing an issue with flexslider.load.js
Object [object Object] has no method 'once' flexslider.load.js?n16yfz:34

line 33 |  function _flexslider_init(id, optionset, context) {
line 34 |      $('#' + id, context).once('flexslider', function() {
//  Uncaught TypeError: Object [object Object] has no method 'once'
ohthehugemanatee’s picture

ohthehugemanatee commented

Throwing my hat into the ring, I seem to have the same problem. Interestingly it's affected by my login status.

I have two flexslider slideshows, both built in Views just as described above. One on the front page, and one on gallery pages.

The frontpage works fine as anonymous (even through cache clears), but exhibits this broken behavior when I'm logged in as admin.

The gallery page works fine when I'm logged in as admin, but exhibits this broken behavior as anonymous.

I'm on latest dev of flexslider.

ohthehugemanatee’s picture

ohthehugemanatee commented

update: the two cases were caused by two different problems: the frontpage is fixed by disabling the Edit module. JS console showed me edit.js was throwing an error.

But the gallery page is still experiencing the same problem.

Further note: on the gallery page I followed the flexslider_example example, and have a separate Views Display (also flexslider-based) providing the thumbnails for the main flexslider display. It works fine on the thumbnails Display.

ohthehugemanatee’s picture

ohthehugemanatee commented

Even the flexslider example of two flexsliders on a page doesn't work for me... JS console gives "TypeError: a.slides.on is not a function", which I gather is a result of it not attaching properly.

I'm out of time on this issue; I have to move to a different slideshow module unfortunately.

mettam’s picture

mettam commented

For anyone that has this problem... a potential solution!

I had exactly the same issue, only in my case it was just in one language that was not loading the flexslider.load.js function and thus causing the problem.

I tracked the issue down to a missing in a block holding some Google remarketing code for that language that was loaded just above where the code should have been included. As soon as I added that missing tag, my slideshow appeared.

VectorNM’s picture

VectorNM commented

Has anyone figured out a solution to this problem?

I just added flexslider to a new site i've been creating and this is also happening to me.

Bagz’s picture

Bagz commented

From my experience the flex-viewport div is only generated when the flexslider Animation Settings is configured as "Slide". It does not get generated when the animation is set to "Fade".

swhitters’s picture

swhitters commented

Thank you Bagz! My flexslider was not displaying multiple items correctly, but switching the animation style to "slide" worked! The viewport is now being generated.

amaria’s picture

amaria commented
Status: Active » Fixed

I'm marking this fixed since a solution has been presented.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.