Flexslider Fades But Will Not Slide

FlexSlider fades but will not slide?

Your li elements need position relative. The captions are positioned absolutely, and the relative container in your setup is the .flexslider element. I'll patch an update for this soon.

Flexslider fade issue

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; 

Flex Slider - animation not working

Fixed! For anybody interested, Flexslider 2 screwed up the css transition for fade for webkit based browsers. Thankfully they provide the option to use jquery easing instead. Just include jquery.easing.js, and use the following parameters to your flexslider:

   easing: 'linear',
   animation: "fade", 
   slideshowSpeed: 5000,
   animationSpeed: 500,
   animationLoop: true, 
   smoothHeight: false,  
   useCSS: false,

Flexslider - Prevent first slide from fading in

It turns out that this is the same issue that causes the Flexslider to not fade in IE on Windows 8 (see https://github.com/woothemes/FlexSlider/issues/1043).

As a workaround I set touch: false as suggested in the post on Github. This made the transition work on devices.

It works as intended now, with the first slide not fading.

Flexslider - animation: slide, animationLoop: true - Conflict

remove these lines from the jquery.

methods.uniqueID( slider.slides.first().clone().addClass('clone')
).appendTo( slider.container ); methods.uniqueID(
slider.slides.last().clone().addClass('clone') ).prependTo(
slider.container );
}

This will fix the issue.

---

Related Topics