I am using jssor slider .I have a requirement, I used images gallery with thumbnails . When clicked on external button thumbnails should hide and image should align centre in slider and arrows should align left and right to slider.
If you know how to set slider height and width according to window size please help me.
Your slider is made of 'outer container', 'slides' container and 'thumbnail navigator' container. You can adjust layout dynamically.
Refefence: http://www.jssor.com/development/tip-arrange-layout-adjust-size.html
You can scale the slider while window resizes, please note that jssor slider always keeps aspect ratio.
Reference: http://www.jssor.com/development/tip-make-responsive-slider.html
Related
I have added an image as a canvas child, the image is just a layout to outfit UI text elements like in below image.
here the black outline is the image and red one is their bounds which we can see in editor, the blue text is UI Text element with anchor preset bottom stretch and right = 100. The canvas render mode is screen overlay, scale with screen size, reference resolution is 1920x1080. Thus in image 1, the UI text is in middle, but in image 2 (different resolution) it does't look like in middle.
You need to set Text anchor preset to bottom-center to achieve that Text is always in the middle-bottom of the screen.
This manual is a great Instruction of how you can position UI elements relative to the Canvas and each other.
I just want to make a fullscreen slideshow with Jssor. But it seems to me the container's width and images' width must be fixed but not percentage. Is it possible at all?
You are right, jssor slider doesn't support percentage width.
What you can do is to make a percentage width div container, and then put jssor inside the container. As jssor slider always scales to fit the parent container, it will meet your needs.
Jssor: Nice work!
I would like to build a grid slider in the following way (based on the jssor grid slider example):
1 vertical carousal contains 3 horizontal carousals (exactly like the example)
3 horizontal carousals (h1, h2, & h3) have a number of photos.
The first photo of each horizontal carousal is static (would not slide out, but would slide up and down).
Could it be done?
Thanks in advance!
Given a main slider (vertical) with 3 slides, and each slide contains a child slider (horizontal).
As each slide (of the main slider) is fully customizable. You can place a static image and a child slider (horizontal) in each slide.
Hope this help.
I'm using jssor plugin for slideshow of my content. There is a bunch of configuration options, which is great, but I can't find one for dynamically changing height of slide, and not sure if that is possible at all.
I see that one must specify height and width of outer container, and that slides will take its width and height. But can that be changed on the fly?
Hope the $ScaleHeight api help.
instance.$ScaleHeight(); //Get scaled height
instance.$ScaleHeight(height); //Scale the slider to new height and keep aspect ratio.
My slides are different sizes, and orientations (some panoramas). I mean all are pics from a photo roll. Nearly all pics are bigger than the viewport in one way or another. I want them to be centered, have a correct aspect ratio, still have touch controls for iPhone, as well as the < > widgets (which go invisible by the way if the image is narrower than the width of the page) for desktop.
I can get full width, by specifying max-width in CSS. Full height is trickier. The "Full Width Slider" demo fixes height at 500px, and trial and error only allows me to change that to another integer number rather than a percentage.
So I'm struggling to tweak the right options, and set the right style/css inline in the HTML. Is there a better demo for me than "Full Width Slider" (http://www.jssor.com/demos/full-width-slider.html)
It'd be great to pinch-zoom into images that are larger than the viewport, but that's secondary to getting my "fit" issues sorted :)
Please set slider size to your screen size, and set $FillMode to 1.
To apply css tricks to set slider size, you can place jssor slider in a wrapper, and then scale the slider to available width of the wrapper.
See,
function ScaleSlider() {
var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
if (parentWidth)
jssor_slider1.$ScaleWidth(parentWidth);
else
$JssorUtils$.$Delay(ScaleSlider, 30);
}
Reference: jssor full height or full screen slider / possible?