We Keep Coding

Flexslider - thubmnail slider stops slide show on click carousal

I want to implement Flexslider, so I used "Slider w/thumbnail slider" from their home page. Everything fine and working, but I noticed one thing. If I click on any carousel element, it stops the Slideshow. After I need to click on each carousel item to see the slides.
So Is there any option to stop this behavior? I have just made a Fiddle with basic configs to show this.
here is the fiddle
code:
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: true,
sync: "#carousel"
});

After seven years this was asked, I can confirm what vivekkupadhyay wrote in his first comment: it is enough to set pauseOnAction: false, instead of pauseOnAction: true, inside
$.flexslider.defaults = {
};
at the bottom of the js file.

Flexslider infinite loop and create("clones") > 1

Here is an example of infinite loop with flexslider:
http://jsfiddle.net/U2Ysh/161/
Problem is it clones only the first image at the end.
If you click through the slides you'll have to reach exactly the end before the show starts from the beginning.
Is there a solution to fire those image clones a couple of slides before to avoid the ugly white gap? Or something else to achieve this? Thx alot.
$('.flexslider.banners').flexslider({
animation: "slide",
animationLoop: true,
controlNav: false,
slideshow: false,
smoothHeight: true,
variableImageWidth: true,

Why isn't my jQuery Flex Slider pausing?

I've tried all manner of things based on the documentation but no matter what I do, I can't seem to make it pause.
Here's what the documentation says:
slider.pause() //Function: Pause slider slideshow interval
slider.play() //Function: Resume slider slideshow interval
But it doesn't specify how to define the slider variable. I've tried:
var slider = $('.flex-slider').flexslider({
animation: "slide",
easing: "swing",
direction: "horizontal",
animationLoop: true,
slideshow: true,
animationSpeed: 600,
slideshowSpeed: 1200,
controlNav: false,
directionNav: false,
pausePlay: false
});
$('.pause-button').on('click',function({
slider.pause();
});
Which resulted in... http://puu.sh/4qpo3.png
And I've tried:
$('.flex-slider').flexslider().pause();
Which resulted in... http://puu.sh/4qpcS.png
And I've tried:
$('.flex-slider').flexslider().pause(true);
Which resulted in... http://puu.sh/4qpcS.png
And all in all I'm just not seeing what exactly I'm doing wrong here.
Anyone wanna provide some insight? :)

Try $('.flex-slider').flexslider('pause') and $('.flex-slider').flexslider('play').

Hi I see you turned off the option
pausePlay: false
Now edit few thing. first turned on the option
pausePlay: true,
pauseText :"Pause",
playText :"Play",
Now you will see a play pause text comes in the slider, with having two different classes for pay and pause, just add your icon image to that class with css. and you will have you desired functionality.

Flexslider with content loaded using JavaScript

I'm loading the content using:
jQuery('slides').html(slides);
I'm using this slider http://flexslider.woothemes.com/. Here is the question. How can I load this slider when the slides in the HTML structure will be added?
All works well when I enter to my website using direct link - then the content is loaded automatically. I have a problem when I load a "subpage" using jQuery, then slider doesn't work.
I tried to add:
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
after jQuery('slides').html(slides);, but it doesn't work.
Thanks!

'slides' isn't a tag name so that last part wouldn't work. Try making that selector actually work, like by using $('#slides')

FlexSlider Fade animation broken in IE7&8

My fade animation is broken in IE7 & 8. rather than fade, the next slide contents are rendered, and both slides are present and mashed together for the specified animaionDuration.
Any fixes for this?
I posted to the FlexSlider 'support' feed, but it's not very well monitored so I'm turning to SO.
Here's my call:
$('.flexslider').flexslider({
slideshow: true,
slideshowSpeed: 6000,
animation: "fade",
animationDuration: 500
});
FlexSlider Documentation here:
http://flex.madebymufffin.com/

I had the same problem, to 'fix' the issue I used an if/else statement to remove the animationDuration from IE7/8 that flex slider uses.
It does mean it's not quite as pretty in IE8/7 but it fixes the issue and leaves all the latest browsers looking as you intended!
if ($().flexslider) {
if (window.navigator.userAgent.indexOf('MSIE 8.0;') > 0) {
$('.flexslider').flexslider({
slideshowSpeed: 5000,
animation: "fade",
animationDuration: 0,
controlNav: false,
pauseOnHover: true,
directionNav: true
});
} else{
$('.flexslider').flexslider({
slideshowSpeed: 5000,
animation: "fade",
controlNav: false,
pauseOnHover: true,
directionNav: true
});
}
};
Hope this helps!

Unable to replicate.
However, I did get this in my error console. If this is causing something else to pitch an error for you, then it could be interrupting the propagation of some jQuery events.
http://web2carz.rawdesigns.net/common/js/awkward.js Failed to load resource: the server responded with a status of 404 (Not Found)
If something in that script is vital, I can foresee issues.

I've noticed that IE7 is not supporting the "fade" animation. I don't know why.
Based on all the answers above, I edited the script call as follows, and it worked.
For good browsers, I have the "fade" effect and for IE7, I have the "slide" effect.
<script type="text/javascript">
$(window).load(function(){
if (window.navigator.userAgent.indexOf('MSIE 7.0;') > 0) {
$('.flexslider').flexslider({
animation: "slide"
});
} else {
$('.flexslider').flexslider();
}
});
</script>