Изображения Flex-слайдера размыты

Question

Я создаю слайд-шоу на своем сайте с помощью Flex-слайдера. Первое изображение выглядит прекрасным, но после этого перед появлением слайдов появляются следующие изображения, и когда он появляется, он размыт и неузнаваем.

вот мой JQuery. Ссылка на изображения не важна, поэтому я ее не включил.

<link rel="stylesheet" href="library/public/designs/flexslider/flexslider.css" type="text/css" media="screen" /> 
<script defer src="library/public/designs/flexslider/jquery-flexslider.js"></script> 
<script src="library/public/designs/flexslider/jquery-easing.js"></script> 
<script src="library/public/designs/flexslider/jquery-mousewheel.js"></script> 
<script defer src="library/public/designs/flexslider/demo.js"></script> 

<script> 
// Can also be used with $(document).ready() 
$(window).load(function() { 
    $('.flexslider').flexslider({ 

selector : ".slides > div.tile" 


    }); 
}); 
</script> 


<style> 
.flexslider .slides > div.tile { 
    display: none; 
    backface-visibility:hidden; 
    -webkit-backface-visibility:hidden; /* Chrome and Safari */ 
    -moz-backface-visibility:hidden; /* Firefox */ 
    -ms-backface-visibility:hidden; /* Internet Explorer */ 
} 
.flexslider { 
    margin: 0; 
    background: #fff; 
    border: 0; 
    position: relative; 
    -webkit-border-radius: 0; 
    -moz-border-radius: 0; 
    -o-border-radius: 0; 
    border-radius: 0; 
    box-shadow: none; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    -o-box-shadow: none; 
    zoom: 1; 
} 
.flex-control-nav { 
     width: 100%; 
     position: absolute; 
     right: 10px; 
     top: 10px; 
     text-align: right; 
    z-index: 100; 
} 
.flex-control-nav li { 
    margin: 0 2px; 
} 
.flex-control-paging li a { 
    border: none; 
    width: 11px; 
    height: 11px; 
    display: block; 
    background: #ddd; 
    cursor: pointer; 
    text-indent: -9999px; 
    border-radius: 0; 
    box-shadow: none; 
    font-size: 0; 
} 
.flex-control-paging li a:hover { 
    background: #0068b3; 
} 
.flex-control-paging li a.flex-active { 
    background: #0068b3; 
    cursor: default; 
} 
.flex-direction-nav { 
    *height: 0; 
} 
.flex-direction-nav a { 
    width: 30px; 
    height: 30px; 
    margin: -20px 0 0; 
    display: block; 
    background: url(library/public/designs/flexslider/bg_direction_nav.png) no-repeat 0 0; 
    position: absolute; 
    top: 50%; 
    cursor: pointer; 
    text-indent: -9999px; 
    opacity: 0; 
    -webkit-transition: all .3s ease; 
} 
.flex-direction-nav .flex-next { 
    background-position: 100% 0; 
    right: -36px; 
} 
.flex-direction-nav .flex-prev { 
    left: -36px; 
} 
.flexslider:hover .flex-next { 
    opacity: 0.8; 
    right: 5px; 
} 
.flexslider:hover .flex-prev { 
    opacity: 0.8; 
    left: 5px; 
} 
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { 
    opacity: 1; 
} 
.flex-direction-nav .flex-disabled { 
    opacity: .3!important; 
    filter: alpha(opacity=30); 
    cursor: default; 
} 
</style> 

Answer 1

Попробуйте отключить CSS переходы, а вы инициализацию ползунка, как это:

<script> 
    $(window).load(function() { 
     $('.flexslider').flexslider({ 
      selector: ".slides > div.tile", 
      useCSS: false 
     }); 
    }); 
</script> 

Для меня, отключения CSS-переходов, как это решается также куча других проблем. Похоже, что не все браузеры готовы к использованию CSS-переходов в flexslider.

Answer 2

Иногда плагин вычисляется переход с десятичными числами, и поскольку подмигнули с использованием CSS 3 перехода, веб-комплект работы очень это не распространяется также с десятичной

Мое решение было поставить Math.Floor(), чтобы рассчитать позиции.

Приобретите для этого: return (posCalc * -1) + "px"; И изменить для этого: return Math.floor (posCalc * -1) + "px";