Sliders won't show on pages

[Wendell Harness]

Here’s an interesting dilemma for you.

I’ve started a site using WPJS2.0RC1, setup a page using a sample layout that contains a slider (the About sample). The slider shows up just great, no problem. However, when removing the sample images and replacing with my own, the slider images don’t appear on the page. The navigation arrows and dots are there, but no images.

So I opened console and see this message:

Uncaught TypeError: Cannot read property 'offsetWidth' of undefined
c.slide @ bootstrap.min.js?ver=3.3.4:6
c.next @ bootstrap.min.js?ver=3.3.4:6
m.isFunction.e @ jquery.js?ver=1.11.2:2

I then tried removing the entire slider element and inserted a new one, then added my images. Same error in the console.

Then I looked at another page using a sample slider and no errors in the console (and the slider appears just fine on the page).

Any ideas what might be happening here and how to fix?

Topic

[Jason Bobich]

It sounds to me like your images are not getting saved to the slider. I would start to tackle the issue not by errors you’re getting on the front end, but with the images you’re inserting from the builder. Can you think of anything unique about these images? Try uploading new images and inserting them.

And is this slider at the bottom of the layout? Are the images still in the builder once you’ve saved and refreshed the admin page? Meaning, are they actually saving.

[Wendell Harness]

Nothing more unique than I’ve used before. I did save them at a larger size than is needed for the slider though, so they could be resized and account for parallax effects as well. The images are 1200×600.

The slider is at the top and the images do actually show in the slider after uploading and in the media library.

Interestingly, I resized the images to 1200×450, the size called for by the slider, and they work now. I assumed that larger would be fine since they would just be resized accordingly. Still seems odd to me though.

[Wendell Harness]

Oh wait, scratch that. The resized 1200×450 images work in the slider on the home page but not on the About page. Interesting. I’ll continue to troubleshoot.

Edit: Playing around some more, I removed a columns element that was under the slider, which contained a current page content element and some testimonial elements. Then I added a current page element under the slider and saved. The slider suddenly appeared. So then I removed the new current page element and reconstructed the columns as before. Slider still working. Very, very strange. Anyway, problem seems to be resolved.

Thanks for prompting me to change things around!

[Jason Bobich]

It’s very hard for me to speculate if you’re running into this, but if you don’t know about this potentially server-related issue, it’s important that you do when working with the Builder because you’re dealing with submitting such a large form.

Issue: When you save a custom layout, it doesn’t get fully saved. (this is why I asked if your slider was at the bottom of the layout)

Reason: If your server has PHP 5.3.9+ there’s a configuration setting called max_input_vars, which limits the amount of inputs that can be submitted at one time through a given form. By default this value is set to 1,000. Basically, PHP will just cut off the data after 1,000 inputs.

How to know if this is your issue: Install this WordPress plugin — http://wordpress.org/plugins/wp-max-submit-protect/ — When you click “Publish” on editing a page, before saving the page and layout, it will tell you how many inputs you’re submitting and how many your server allows.

Solution: Just contact your webhost and ask them to change the PHP max_input_vars setting from default 1000 to 3000.

[Jason Bobich]

http://docs.woothemes.com/document/problems-with-large-amounts-of-data-not-saving-variations-rates-etc/

[Author]

Replies