Jssor slider 100% width (blurred images)

Question

I'm using the slider 100% width, and it's great! but I realized the images I uploaded for background of the slides seems to be blurred, although the real size of them is superior as the one displayed in the slider. I do not know which property may cause the blurring, is there any way to get rid off? thank's!!!

could you provide some code please? – timr Mar 25 '15 at 00:06 — timr, Mar 25 '15 at 00:06

score 0 · Answer 1 · answered Mar 25 '15 at 00:33

Please note the following code in the demo,

<div id="slider1_container" style="position: relative; margin: 0 auto;
    top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden;">
    ...
    <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1300px;
        height: 500px; overflow: hidden;">

First of all, it will fill your image in the 'slides' container according to $FillMode option.

And then, it will scale the whole slider to fit window width (according to the logic in your responsive code).

If 'slides' container size is smaller than your image size, it may lose quality. The way to fix it is to set the size of 'slides' container to your image size.

Jssor slider 100% width (blurred images)

1 Answers1