Limited availability during the holidays

Another busy year is coming to its end, and an exciting year lies ahead. In order to get ready for a fresh new start, our team will spend a few days' rest during the winter holidays. Over the holiday break, we will have reduced staffing from December 20th, 2024, to January 5th, 2025, so please be patient if you do not receive a response as quickly as you normally would.

We send our warmest wishes for happiness, health, and success throughout the coming year. Thank you for your continued support, and may you have a peaceful and blessed Happy Holidays!

Okay
  Public Ticket #2994511
Positioning the slider on the page
Closed

Comments

  •  1
    David started the conversation

    I just purchased LayerSlider7 and I’m having some trouble getting the basic positioning and zoom-in behavior working the way I want. What I want is pretty simple and straightforward. I just want my photo layers to fill the available space and to resize, as needed, when the browser window (on desktop PC) changes size.

    However, what I’m seeing has the picture cut off at and bottom. Or, depending on the parameters it might have a big gap of white space above or below the slider.

    So, I need some help getting up to speed with the basics. I’ve read all the documentation pertaining to this aspect of the slider but there’s a lot that’s still unclear.

    I’ve chosen the Full size layout option in the Project Settings and I’ve set the Canvas Width/Height to: 1280 & 700. Right now, the Mode is set to normal but changing it to Fit to Parent Height didn’t work either. Allow Fullscreen Mode is off.

    In this project I have only a single slide with no background, just one layer with a photo on it; size: 1440 x 1086. I don’t know whether to use Align position: sides of the project or sides of the screen. I’ve tried both. Also, I don’t know where on canvas to position the photo; right now, it’s set to 0,0. With the current parameters there is a lot of blank white space above and below the photo. This amount of white space varies depending on the browser window size.

    The other thing I would like is to be able to specify where the origin is for zooming in. Right now, as I increase the browser window size more of the photo gradually appears at the left. But I need to have it zoom in on the center of the photo so that more of the photo appears on both the left and the right.

    You can see these problems at the Related URL. The slider is the first element at the top right of the home page.

  •  138
    George replied

    Hello David,

    If you need that a picture always fit the whole slider, you have two options:

    1. you can set the picture as slide background image (Attachment: slide-bg.png) In this case, make sure, that background position is set to center/middle and background size to cover.

    2. you can create a layer for the picture, but in this case, you should use a HTML layer. (Attachment: HTML-layer.png)
    Add Layer -> HTML, remove the text, and add your picture as a background image. After that, please set the properties as you can see on the attached screenshot.

    Best Regards,
    George | Kreatura Dev Team

  •  1
    David replied

    Hi George, thanks for the reply. I've tried option 1 but it's no help. Now, the slider just disappears altogether. I've checked the Project Settings and I don't see anything there that should hide the slider.

  •   David replied privately
  •  1
    David replied

    Never mind about the disappearing slider. I discovered that the problem was the Publish Status. That's fixed.

    But now I'm trying to get a text layer to word wrap and that's not working. I have Line Breaks set to Automatic and Word Wrap turned on. Size, Width & Height are set to auto. But the text never wraps. How is this supposed to work? There's nothing in the documentation.

  •  138
    George replied

    Hello David,

    Please set the width of that layer. That should work.

    Best Regards,
    George | Kreatura Dev Team

  •  1
    David replied

    Thanks, George, that worked!