CODEWITHSUNDEEP
htmlcssfirefoxflexslider
TJ15
TJ15

Reputation: 363

Flexslider fade issue

I have seen lots of similar issued but none that resolve my problem. I am using flexslider 2.2.0 and when I implement the fade animation the function is broken in Firefox version 30. In IE, Chrome etc there are no problems. I use the following code

<script src="site/flexslider/jquery.flexslider.js"></script>

<script>
jQuery(document).ready(function($) {
    // You can use the locally-scoped $ in here as an alias to jQuery.
   $('.flexslider').flexslider({
        animation: "fade",
        slideshowSpeed: 10000, 

        });
});
</script>

If I use the slide animation then they are no issues on all browsers.

I have tried

Find & Replace the code in flexslider.js:

Find : eventType = (touch) ? "touchend" : "click",

Replace: eventType = "click touchend MSPointerUp",

and also removing: el.addEventListener('touchstart', onTouchStart, false);

But still have the issue.

Any ideas?

Upvotes: 1

Views: 3687

Answers (1)

Hussy Borad
Hussy Borad

Reputation: 583

They aren't animating the transition so likely you need to add some CSS transition. I did this with sass compass:

.flexslider .slides > li { 
  @include transition(opacity 1s ease);
}

which adds these prefixes:

-webkit-transition: opacity 1s ease; 
-moz-transition: opacity 1s ease;
 transition: opacity 1s ease;

Upvotes: 1

Related Questions