CODEWITHSUNDEEP
jqueryimagesliderflexslider
Justin Burlace
Justin Burlace

Reputation: 1

Flex-slider images are coming up blurry

I am creating a slideshow in my website using Flex-slider. The first image comes up fine however after that the following images flash beneath the slide show before appearing and when it does appear it is blurry and unrecognizable.

here is my Jquery. The link to the images isnt important so i didnt include it. 

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

Upvotes: 0

Views: 2763

Answers (2)

Marcelo
Marcelo

Reputation: 1

Sometimes the plugin calculate the transition with decimal numbers, and since it´s using CSS 3 transition, the web kit doesn´t work very well with decimal,

My solution was to put a Math.floor() statment whe it calculate the positions.

Seach for this: return (posCalc * -1) + "px"; And change for this: return Math.floor(posCalc * -1) + "px";

Upvotes: 0

johnnydoe82
johnnydoe82

Reputation: 348

Try to disable CSS transitions while you're initializing the slider, like this:

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

For me, disabling CSS-Transitions like this also solved a bunch of other problems. Seems that not all browsers are ready for CSS-Transitions in flexslider yet.

Upvotes: 1

Related Questions