Layer Slider not showing full width on JS 2.1

[askwpgirl]

Hi Jason,

After updating to JS 2.1, all my full-width layer sliders are off center on the first slide. I tested in a clean dev environment and on sites.

To reproduce, create a new blank JS 2.1 install. Add Layer Slider plugin and import one of the full width slider demos. Create a custom template and put the shortcode for the layer slider into a content block. The first slide will cause the whole slider to be off center to the right with a white gap on the slider. When the slider advances, it will figure out its left positioning correctly.

This is an issue with all version of Layer Slider using JS 2.1 but is not an issue with JS 2.0.

Not sure where to go with this. Seems very JS 2.1 specific.

Thanks! Happy Friday Night!!! Lol.

Angela

Topic

[Jason Bobich]

Apologies, Angela, but I only test and build in compatibility with Revolution Slider plugin. I’ve honestly never even used Layer Slider so I’m not sure what I can really tell you there.

[askwpgirl]

Layer Slider is a really popular slider plugin, probably next most popular to Revolution Slider. Many people use it instead of Revolution Slider because it’s not as crazy complicated as Rev Slider and also handles animations. A lot of theme developers bundle the two plugins together with their themes.

What specific issues did you encounter with full width Revolution Slider sliders? Maybe I can troubleshoot the issue. Something with JS 2.1 changed the way the slider is perceiving the container width.

[askwpgirl]

I think I figured it out. Adding this to the child theme style.css file seems to have fixed it:

.ls-wp-fullwidth-helper {
    position: static;
}

[Jason Bobich]

Yup, I know it’s popular. But I wanted to pick just one to continually check compatibility for and promote, and picked rev slider awhile back.

Here’s a full-width example of rev slider, using a custom layout, where the layout builder adds a custom element for it:

http://demoblvd.com/themes/jumpstart-2/demo-1/practical-examples/revolution-slider/

[Jason Bobich]

Sorry forgot to mention I never had to do anything with CSS for rev slider. It’s just always worked.

Show me a link to a live example of the layer slider issue and I’ll see if I can spot why it’s not working.

[askwpgirl]

Thanks, dear. Here are two samples:

Jump Start 2.1
==========
http://askwpgirl1.wpengine.com/ – Slider on a normal page set to full width. Works fine here.

http://askwpgirl1.wpengine.com/layer-slider-full-width-on-custom-template/ – Slider on a custom layout in a Content block. Note the first slide is pushed over to the right, once the slider cycles, it gets correct positioning.

I turned off the auto sliding, so you can see the problem more easily on that first slide.

Jump Start 2.0
==========
http://askwpgirl2.wpengine.com/ – full width Layer Slider in custom layout works fine

Thanks again for checking!!! I am waiting to update to 2.1 on sites I have this one. I imagine it will be something easy.

[askwpgirl]

The main difference I see between the two JS versions in this regards are the transform properties.

[askwpgirl]

I realize I didn’t include all the CSS above that I used to “fix” the problem:

I added a custom CSS class to the section called “layer-slider-section”, then added the following CSS rules to my child theme stylesheet:

.layer-slider-section.element-section {
    padding: 0;
    position: relative;
}

.layer-slider-section.element-section>.element {
    padding: 0;
    max-width: 100%;
}

.ls-wp-fullwidth-helper {
    position: static;
}

That appears to be working. But, I am curious about your thoughts about what happened between JS 2.0 and 2.1 to necessitate this need.

[Jason Bobich]

I don’t think think there’s anythign wrong with the plugin or the theme. — You just need to select the “Popout” checkbox in the Content element’s display options in the layout builder. You must do this with any element that you want to be full-width.

[askwpgirl]

Yes, of course. That is the first thing I tried, and it was still messed up, actually more so.

[askwpgirl]

Here’s the page again with popout selected:

http://askwpgirl1.wpengine.com/layer-slider-full-width-on-custom-template/ – doesn’t really make a difference, so popout isn’t the issue.

The CSS I put in my last comment does solve the problem on the other test site I have and on a colleague’s site. Just curious why it’s an issue in JS 2.1 and not 2.0.

Thanks again!!! I know these things are hugely annoying.

The subsequent slides work fine, so there is some temporal thing where the slider isn’t interpreting its positioning correctly in JS 2.1 and is pushing the slider off to the right.

[askwpgirl]

My suspicion is that it’s all related in some way to the transform/transition properties in 2.1, so I think that’s where I’ll focus next, as I think my CSS fix above is a bit kludgy.

[askwpgirl]

Okay! That was it!!!

/* Animations */
.tb-scroll-effects.desktop #custom-main .element-section > .element-content {
	-webkit-transition: all 0s ease-in-out;
	transition: all 0s ease-in-out;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

The transition and transition delay cause the Layer Slider to not be able to get its bearings, so to speak, on the first slide, that’s why subsequent slides work fine. So, the fix is really to the above CSS, which of course could be targeted for just that builder content element containing the Layer Slider.

[Jason Bobich]

You can also disable the scroll effects from filtering the global config, as well.

http://support.themeblvd.com/forums/topic/jump-start-2-1-disable-animation/#post-25963

[askwpgirl]

Cool. Yes, that worked, too! I was going to try that next.

So, if one wants to keep the transitions, they can disable using CSS on things that might be adversely effected by it, like the Layer Slider.

[Author]

Replies