Is it possible to put a background-image pattern in a jssor slider and avoid to scale when resizing the screen?
This is the original background pattern
This is what happen when reducing the browser window
<div data-u="slides" style="cursor:default;position:relative;top:50px;left:0px;width:3000px;height:1500px;overflow:hidden; background-image: url(img/pattern.jpg); background-repeat:repeat;">
As jssor slider will always scale to fit the parent container.
You can create a div wit background image, and place jssor slider in the div.
Related
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.
Well, I am not expecting anyone else but jssor himself again to help me out with the best image slider plugin he made(jssor helped me earlier on stackoverflow). I wanted to make the jssor carousel responsive in terms of reducing the number of images shown inside the slide. As of now, the size of the images inside the carousel gets reduced as we move on to smaller resolution devices. However, at some point, this images look real tiny and are not desirable. This issue can be fixed, if we reduce the number of images shown inside the carousel for smaller screens. Like if we are showing 5 images on a larger screen, how do we show only 2 for considerable lower screens?
Waiting on you jssor!!! Keep on the good work you've done!
You know all elements in the slider will scale while window resizing.
As you set small size of your slider, and it scales to bigger size, the arrows looks bigger then.
2 ways to prevent it from scaling bigger.
first, Make the original size of slider bigger, it will prevent the slider from displaying with large scale ratio.
second, Suppress the arrows from scaling explicitly with data-noscale="1".
<span data-u="arrowleft" class="jssora13l" style="top:0px;left:30px;width:40px;height:50px;" data-noscale="1"></span>
<span data-u="arrowright" class="jssora13r" style="top:0px;right:30px;width:40px;height:50px;" data-noscale="1"></span>
Example: suppress arrows from scaling - jssor slider
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
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?
For the problematic behavior, try resizing the window of this web app. Thought the header and boxes stop being resized after a minimum dimension, the background image continues to position itself at the center of the page, which looks really stupid.
Here's the relevant code for the background image:
body{
text-align: center;
min-width:1000px;
min-height: 600px;
background: url(../images/road_newtry_tile4.jpg) 50% 50% fixed;
}
Even though background-position isn't nixing the min-width and height (ie, the window will stop resizing after predetermined dimensions, it continues to center the background image.
Why is it doing this? How can I prevent the image from re-centering after certain a certain point?
it is doing it because the 50% is relative to the size of the browser window. A fix would be to instead have the background image on a wrapper div, which has the min-width and min-height set.