This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Tagged: 

Layer Slider not showing full width on JS 2.1

  • Creator
    Topic
  • #26035
    askwpgirl
    Participant

    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

Viewing 15 replies - 1 through 15 (of 15 total)
  • Author
    Replies
  • #26036
    Jason Bobich
    Keymaster

    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.

    #26037
    askwpgirl
    Participant

    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.

    #26038
    askwpgirl
    Participant

    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;
    }
    
    #26039
    Jason Bobich
    Keymaster

    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/

    #26040
    Jason Bobich
    Keymaster

    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.

    #26042
    askwpgirl
    Participant

    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.

    #26043
    askwpgirl
    Participant

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

    #26044
    askwpgirl
    Participant

    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.

    #26049
    Jason Bobich
    Keymaster

    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.

    #26050
    askwpgirl
    Participant

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

    #26051
    askwpgirl
    Participant

    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.

    #26052
    askwpgirl
    Participant

    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.

    #26053
    askwpgirl
    Participant

    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.

    #26054
    Jason Bobich
    Keymaster

    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

    #26056
    askwpgirl
    Participant

    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.

Viewing 15 replies - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.