Layers in Fullwidth Slider inside the Site Container

[JoomFX]

Hey David,

First of all, thank you very much for the great plugin!

As the title says, I'm trying to place the Slider layers inside the site container. Here's what I mean - as you know, most sites/frameworks have a site container which is centered on the screen. Usually, this container is 1200px or whatever, it varies. I have a fullwidth Slider and I need to have the topLeft, topRight, bottomLeft, bottomRight, centerLeft and centerRight layers to start from the container, not from the screen itself. Here, this screenshot shows what I mean - as you can, it is a topLeft layer and it starts from the top left of the screen, I need it to start from the top left of the container instead.

I tried wrapping the layer with another DIV and then tried to center it via CSS but it didn't really worked:

HTML:

<div class="slider-pro" id="my-slider">
    <div class="sp-slides">

        <div class="sp-slide">
            <img class="sp-image" src="path/to/image1.jpg"/>

            <div class="g-layer-container">
                <h3 class="sp-layer sp-black sp-padding">Lorem ipsum dolor sit amet</h3>
            </div>
        </div>

    </div>
</div>

CSS:

.g-layer-container {
    width: 1200px;
    margin-left: 0;
    margin-right: 0;
}

The above CSS code is just an example, in the final version (if I manage to get it to work) there will be Media Queries that will handle the fixed pixel width for all resolutions/devices.

Could you please tell me how I can accomplish what I need? Is there an existing setting or a combination of settings that will do what I need? If this is currently not possible, would you consider implementing it?

I did read the whole documentation and all opened and closed issue and I didn't find anything similar 😉

[davidghi]

Hi there. You could set the reference point of the layer to center: data-position="centerCenter"

Cheers

[JoomFX]

Hey David,

Thank you for the reply! Yep, I was thinking about data-position="centerCenter" but it is not really an ideal solution, it cannot really replace the "Site Container". Let me explain everything in details....

First of all, I admit that the "Site Container" feature will be needed mostly for "FullWidth" sliders. It might be a good addition for normal slider as well, but its real power will be in the "FullWidth" sliders.

All this fuzz about "Site Container" feature is to allow the users to place the layers more easily and more precisely in FullWidth sliders (which are quite trendy for several years already). The whole idea is to have a consistent placement of the layers in all breakpoints/resolutions/devices. Your script is great already, as it has a breakpoints property but then the user will need to specifically adjust the layer position/settings for each breakpoint. While, if there is a "Site Container" feature, the user would be able to set the layer as data-position="topLeft", data-horizontal="50px" and data-vertical="50px" and they will have a consistent placement of the layer across all breakpoints. Yep, a similar consistent placement could be achieved if the user uses percentage instead of fixed pixels, but it is still not that great without a "Site Container".

The "Site Container" is all about having another reference point for the layers.

As you probably already know, the Revolution Slider and the Layer Slider plugins have this feature already. Here, have a look at this screenshot, it is from the Revolution Slider. Notice the Layers Grid Size setting and the gray info box below it.

David, your script is awesome already! Everything can be achieved with the options that are already available. Therefore I would understand you completely if you do not want to add this as a feature. If so, could you please let me know how to implement/achieve the "Site Container" feature myself, as a custom solutions/workaround? Any hints about JS modifications that I would need to make or the HTML markup I would need to have would be greatly appreciated!

Thanks a lot David and sorry for the long comment :wink: