blured images

Chen's Avatar

Chen

08 May, 2018 02:01 PM

hello,
is seems like no mater what options i try, the images quality is not at it best and they are a little blured.
this is the options i'm using now:

$(".royalSlider").royalSlider({
     // general options go gere
autoScaleSlider: true,
autoScaleSliderHeight: 250,
loop: true,
imageScaleMode: 'fit',
     keyboardNavEnabled: true,
addActiveClass: true,
imageAlignCenter: true,
        visibleNearby: {
            enabled: true,
            centerArea: 0.5,
            center: true,
            breakpoint: 650,
            breakpointCenterArea: 0.64,
            navigateByCenterClick: true
        },
video: {
     // video options go gere
     autoHideBlocks: true,
     autoHideArrows: false
     }

    });

});

///// css

.royalSlider {
  width: 100%;
  height: auto;
}

.royalSlider .rsSlide img {
    opacity: 0.45 !important;
    -webkit-transition: all 0.5s ease-out !important;
    -moz-transition: all 0.5s ease-out !important;
    transition: all 0.5s ease-out !important;

    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
margin-left: auto !important;
padding: 8px;
border: solid 1px #BDBDBD;
border-radius: 4px;
}
.royalSlider .rsActiveSlide img {
    opacity: 1 !important;
    -webkit-transform: scale(1) !important;
    -moz-transform: scale(1) !important;
    -ms-transform: scale(1) !important;
    -o-transform: scale(1) !important;
    transform: scale(1) !important;
}

  1. Support Staff 1 Posted by Dmitry Semenov on 08 May, 2018 05:52 PM

    Dmitry Semenov's Avatar

    Hello,

    Can you please link to the page with the issue?

  2. 2 Posted by keren on 09 May, 2018 05:29 AM

    keren's Avatar
  3. Support Staff 3 Posted by Dmitry Semenov on 09 May, 2018 06:25 AM

    Dmitry Semenov's Avatar

    The issue is likely caused by border-radius and padding styles on images, as they distort the aspect ratio.

    Try removing them, or force auto height on img elements to override JS styles (height:auto !important).

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac