2

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 :)

Ferrmolina
  • 2,737
  • 2
  • 30
  • 46
paul_h
  • 1,859
  • 3
  • 19
  • 27

1 Answers1

0

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?

Community
  • 1
  • 1
jssor
  • 6,995
  • 2
  • 18
  • 21