Question about features and function

[AndreasRogall]

Hi David,

Can you provide more information about:

1) sp-no-scale

When, where and how to use it, Couldn't find any information about this.

2) And the following seems not to work for me. Can you give an example of How to use the following two data-show-offset data-hide-offset

using them with let's say : " class="sp-layer sp-white sp-padding" data-position="centerRight" data-show-transition="down" data-show-delay="500" data-hide-transition="up" data-hide-delay="200"> ... "

3) Would love to have 2 additional transition effect for layers: a) scale ZoomIn and ZoomOut b) FadeIn and fadeOut

Best regards, Andreas

[davidghi]

Hi Andreas,

1. sp-no-scale is a class that can be added to the layers in order to make them unscalable when the size of the slider changes. Without this class, the layers would scale down proportionally with the slider.

2. data-show-offset and data-hide-offset will move the layers from an initial position to a final position by the amount specified to these attributes. If you set these to 0, the layers will simply fade in/out without any change in their position.

3. Fade in/out are currently possible if you don't use the data-show-transition and data-hide-transition attributes. Without these attributes, the layers will simply fade in/out. They will fade in/out even if you use a transition attribute.

Best, David

[AndreasRogall]

Hi David, Thanks for your fast response - your customer service is outstanding!

1 - Is now clear.

2 - The position is one or two axis (x,y) ?

    Can they be negative and does that mean out of canvas?
    Can I combine them with the Layer example (image attached below)?
    Are they related to data-horizontal="40" data-vertical="34%"
    and can I use Percentages to.

    Some examples of how to use them and combinations possible would be helpful.    

3 - That means I can have movement OR I can have fade-in/out BUT without movement. My Idea was to add this to the end of a layers movement.

BTW all these three points are not explained nor mentioned in the Readme file. And the modules.md file is missing the sp-no-scale.

In addition, The use of aspectRatio in api.md has a value of -1, but how to use it for let's say a 3:2 ratio? 3.2 or 3,2 or 1.5?

Best regards, Andreas

[davidghi]

You're welcome, Andreas!

2) The data-position attribute indicates the reference point (topLeft, bottomRight) and the data-horizontal and data-vertical attributes indicate the position on the X (for data-horizontal) and Y (for data-vertical) axis relative to the reference point. You can use percentages and negative values, but I recommend static and positive values because they scale better. Please take a look at the examples included and let me know if you need further explanations or more examples.

3) The layers will always fade in/out, unless you set them to be static (visible all the time). If they are animated, they will always have their opacity animated when they appear and when they disappear. Then, in addition to the opacity animation, if you use the data-show-transition and data-hide-transition attributes, the layers will also move when they appear and disappear.

The documentation doesn't have detailed explanations, but the examples help you get a better understanding of how the settings work.

The sp-no-scale class is generally not needed because you have the autoScaleLayers option to disable the scaling of the layers if you want.

A 3:2 aspect ratio would be specified as aspectRatio: 1.5.

Please let me know if you have further questions.

Best, David

[AndreasRogall]

Hi David,

You mentioned

Please take a look at the examples included and let me know if you need further explanations or more examples

But I don't see any examples included or attached?

Take a look at the following code <p class="sp-layer sp-header hide-small-screen sp-disPB" data-position="bottomCenter" data-show-transition="right" data-hide-transition="down" data-show-delay="1200" data-hide-delay="100">Choose From Over 130 Special Promotions Models

In the above example inserted, there is a data-position (bottomCenter/topLeft/centerCenter etc..)

However, that doesn't address the use of data-show-offset and data-hide-offset and how these are being used (in combination with the above or alone) and with what value?

Best regards, Andreas

[davidghi]

Hi Andreas,

I was referring to the examples included with the plugin, those from the examples folder.

Regarding your code example, the data-position attribute is not connected to the data-show-offset and data-hide-offset. data-position sets the position of the layer, in this case to the bottom of the slide, on the Y axis, and in the center of the slider, on the X axis. This option is connected with the data-horizontal and data-vertical attributes: you can use these two to further position the layer, but relative to the bottomCenter point of the slide.

The data-show-transition and data-hide-transition attributes will specify the direction in which the layer will move when it appears and when it disappears. The data-show-offset and data-hide-offset attributes will specify the amount by which the layers will move when it appears and when it disappears. These settings also have some default values (50 for data-show-offset and data-hide-offset), so you will see some movement even if you don't set the offset, but only if you've set data-show-transition and data-hide-transition. If you don't set these, the layers will simply fade in and fade out.

Best, David

[AndreasRogall]

Hi David, Thanks for the clarification :)

Sincerely, Andreas

[davidghi]

You're welcome, Andreas! :)

Best, David