davidghi
commented
6 years ago I don't have much to add to what's already in the docs and can be observed in the examples, but if you need additional clarification, I will try to explain it in more words. These options are not conflicting with each other, but some options are overriding others, as mentioned in the docs.
The width and height represent the width and height of the slides, individual slides, not the whole sllider. I explained the difference between slides and the slider here. If you start with the default settings, the width and height of the slides will be exactly those you set with the width and height options.
The aspectRatio option represents the width/height ratio of the slide and this option is used to force the ratio to a certain value. For example, an aspect ratio of 2 means that the width of the slide will be two times the height of the slide, or that the height of the slide will be half the width of the slider. Because this option forces the ratio to a certain value, the height of the slide will be overridden, so, even if you've set the height to 500px and the width also to 500px, if you set the aspectRatio to 2, the height of the slide will no longer be 500px but 250px, half the size of the width.
The aspectRatio is mostly useful for responsiveness when the width of the slide is set to a percentage value instead of a fixed value, because in that case the slider won't know how to proportionally scale the slide unless you indicate it. For example, you can't calculate the aspect ratio of a slide that has a 100% width (which can be anything, depending on the browser's width) and a 500px height; as you scale down the browser, the slider won't know how to resize the height proportionally to the width.
The visibleSize option allows you to have multiple visible slides at the same time, in a carousel-like layout. The default value, auto, indicates that the visible size will have the same value indicated for the width or height values, so only one slide will be visible, but if you set this option to a value higher than the value of the width option, more slides will become visible. The width option will still indicate the width of the individual slides, but the visibleSize will indicate the width of the full area of visible slides.
These can be better understood if you look at the examples and play with the settings.
The width of the slider will be 100% of the parent container, if the slider is set to be responsive and the parent container has a smaller width than the width set for the slider. That's intended behaviour because you wouldn't want a responsive slider to overflow its container. However, if the container has a bigger width than the width set for the slider, the slider's width will not stretch to fill the container; it will have a maximum width, the width you set it to.
I would't change slideDistance to imageGap because the slides are not necessarily images, they can contain other content as well.
as incredible as SliderPro is these 4 items are hard to understand, seem to conflict with each other, and the online documentation on these is lacking and not nearly enough information to be helpful. I also noticed that when you have multiple sliders on the same page with the same
<div> IDand same javascript config items then it looks like all it takes is 1 odd sized or that photos aspect ratio or height is totally oversized then it affects ALL similarly named sliders on that page. So 1 photo in the 3rd slider is affecting the aspect ratio or height or width of the other sliders. i might be wrong on this but it seems like that is happening.So, David, can you explain how all these work with each other and affect each other? I set height and it just does not work. I CAN change aspect ratio and it does more to affect height than height does. I change width and the slider is ALWAYS 100% wide of the parent container. And i have no idea what visibleSize actually does.
So how do you set these? Can or should you use these 4 together or which combinations?
I also noticed i cannot affect mobile screen sizes. no matter what i do to play around with all 4 and their settings i get the same slider size, height and width. I test it out by deleting or clearing the cache on the mobile browser just to make sure it loads properly with new settings.
by the way, if you ever update sliderpro then change the name of some of the settings to be better understood. Example: slideDistance should be imageGap or something because slideDistance is actually the gap between each image.