Slider Revolution

Support
#1

Hi.

My fullscreen background images (size 1920 x 1080px – in order to display properly on retina screens) display fine in the backend while layouting the slides. But when visiting the actual site they only cover half the screen. What is the problem? Which settings do I have to change?

It seems to work with images that are in layers.

Thanks

Grischa

#2

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

#3

Hi.

This is the URL to the specific page: http://work.hykreativ.de/start-3/

I’m having a few more issues with the slider. I’m trying to built a quite simple slider: It is 5 fullscreen slides with changing back grounds, a static box with changing text and very simple transition between.

For some reason I’m not able to implement this.

  1. Fullscreen (below masthead) with the header menu at the top – currently the slider seems to be fullscreen size plus the height the header. It has the .masthead container in the slider settings.

  2. All slides have different fullscreen background image and a static white box with different text. – The box is always the same size no matter how much text. And the text needs always be contained by the box. The first slider has a different text box. As mentioned the background images option don’t work for some reason as they get are fullwidth but only 50% of the browser height. As a work around I used images layer but this interferes with the white box (a global slider element) as I’m unable to change the z index.

  3. All of this needs to be responsive.

4.I would also like to change the colour of the arrow for both on and of positions

Thanks.

#4

Hello There,

Thank you for the clarifications. I am still puzzled because your thread mentioned Slider Revolution and yet in your site, you are using LayerSlider. I am assuming that you want to switch to revolution slider. To help you with, please check out this great tutorial on how to create a fully responsive revolution slider:

Hope this helps.

#5

Hi RueNel.

Due to time constrains I switched to LayerSlider as I couldn’t figure out the problem. I still need to resolve the issue with SliderRev and I’d prefer to work with it as it seems to over more control than LayerSlider.
My main problem wasn’t the responsiveness. The background images just wouldn’t display fullscreen but rather ‘halfscreen’.

But here I have some issues too.

  1. Currently the text is not responsive. It needs to be fullscreen on mobiles. Do I need to built a mobile only slider?
  2. I would like to change the colours of the navigation arrow. And I don’t want the hover animation. Is it possible to exchange them for custom arrows?
  3. The slider should fill the screen space below the header menu. Currently it extends slightly beyond this.
  4. Last but not least I’d like to the text fields to stay in position once they have faded in and rather than fade out, move to the left with the slide.

Thanks for your helps.

#6

Hi,

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password

All the best!

#7

Hi Paul.

Here are the login details.

This is the page with the LayerSlider:
http://work.hykreativ.de/start-3/

This is the SliderRev:
http://work.hykreativ.de/start-2017-v2-sliderrev/

#8

Hello there,

Thank you for writing in!

Follow the answers:

  1. You said that the slider isn`t full-width, so, I’ve changed the Slide layout to full screen and put the shortcode in a test page: http://work.hykreativ.de/slider-test/

  2. To modify the mobile screen, just enabled the Custom grid size here - now, just adjust the text block inside the correct width: check it here.

3.To change the arrow color, go to Slider Settings > Navigation > Arrow and click on Toggle Custom Navigation Style > BG-Color

  1. About animations, this article ought to help you: https://www.themepunch.com/revslider-doc/layer-animations-timeline/
#9

Hi John.

Thanks for your help.

Unfortunately that did not solve my problems. The width is not an issue, the height is. I need the slider (either LayerSlider or SliderRevolution) to be full screen bar the main header menu at the top. Currently the slider extends below the bottom edge which hides the dot navigation.

I need would like to be able change the colour of the arrows in LayerSlider. Unfortunately it is getting a little mixed up as I switched slider plugins due to time constrains. I’d prefer to work with SliderRev though.

These are my issues with LayerSlider:

  1. Currently the text is not responsive. It needs to be fullscreen on mobiles. Do I need to built a mobile only slider?
  2. I would like to change the colours of the navigation arrow. And I don’t want the hover animation. Is it possible to exchange them for custom arrows shapes?
  3. The slider should fill the screen space below the header menu. Currently it extends slightly beyond this.
  4. Last but not least I’d like to the text fields to stay in position once they have faded in and rather than fade out, move to the left with the slide.

IF SliderRevolution is better for all of the above is better, than I need to resolve the following issues:

  1. When placed in the section for slider ‘slider below masthead’ the background picture only displays in the top part of the screen – it displays fine in the slider element.
  2. Again the slider should fill the window minus the header menu ie. I assume it needs to fill the .masthead container.
  3. The text runs out of it’s own box. It looks fine in the backend.

Front End:

Back End:

I hope all of this clear enough.

Thanks again.

#10

IF SliderRevolution is better for all of the above is better, than I need to resolve the following issues:

When placed in the section for slider ‘slider below masthead’ the background picture only displays in the top part of the screen – it displays fine in the slider element.

You need to edit your image had more width in relation to the width, as you can see the proportions are not good for full screen, so in order to cover it needs to cut part of the top.

If you dont mind cutting the bottom, you can add the following CSS to Theme Options CSS

.tp-bgimg.defaultimg {
background-position: top !important;

}

Again the slider should fill the window minus the header menu ie. I assume it needs to fill the .masthead container.

yes you need to add .masthead to the slider settings

The text runs out of it’s own box. It looks fine in the backend.

Please add the following css to theme options CSS

.rev_slider .tp-mask-wrap *:last-child {
margin-top: 0px !important;
}

Hope it helps!

#11

Thanks Joao.

The texts sit better in there boxes now.

I still have issues with background though. The images have this size to display well on large displays. I use 1920 x 1080 as standard for background image. I would like the setting to be in such a way that it fills the height and cuts off left and right.

#12

Hi,

To achieve that you can add the code below in PRO > Launch > Theme Options >CSS

.rev_slider .tp-bgimg {
    background-size:contain !important;
}

Hope that helps

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.