Develop Reference

Flexslider - click image to advance to next slide

I am using the current (mid-2017) version of Flexslider and am trying to alter the code so that a click on an image advances the slider to the next slide.
I am aware that this question has been answered for previous versions but do not know how to alter/insert the code for the jquery.flexslider-min.js of the new Flexslider plugin.
Any help is much appreciated.
$('.flexslider').flexslider({
directionNav : false,
slideshow: false,
animation: "slide",
controlsContainer: ".flex-container",
start: function(slider) {
$('.slides li img').click(function(event){
event.preventDefault();
slider.flexAnimate(slider.getTarget("next"));
});
}
});

I don't know how you're loading things onto your page, but if you put the following on the page(in script tags), the slider should go to the next slide on img click.
<script>
$('.slides li img').click(function(event){
event.preventDefault();
$('#slider').flexslider("next") //Go to next slide
});
</script>
If you are loading this jQuery in an external file, exclude the script tags. Make sure it comes after the flexslider code. Also, you may have to replace $ with jQuery. And, you need to have the class slides on the slide container.
That's right from the repo docs.

Flex Slider Issue Fade effects

I'm using flex slider in my html .
I have followed given steps to add slider in my html page.
Slider works well When animation = "slide" But
Not working properly when animation = "fade" ;
Fade effect does not show proper slides .
here is my script:
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "fade",
animationSpeed: 1000,
direction: "horizontal",
slideshowSpeed: 2000,
pauseOnHover: true,
slideshow: true,
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
Help me out.
thank's

Sounds like something with the CSS. I would create a fiddle so people can see your code and also explain exactly what you mean by "Fade effect does not show proper slides". What happens? Anything?
If you do that then I'm sure you'll get it figured out on here...

I had the same problem. Animation: "slide" worked fine but when I tried to use "fade" I wasn't able to click the thumbnails to change the slides. There is nothing wrong with the flex slider or the javascript. It works great in the flex slider demo, so...
Try fiddling with the positioning/layering of the <ol>. The thumbnails are probably layered beneath the main slide image, making it impossible to actually click them.
This worked for me:
ol.flex-control-thumbs {clear: both;}
But you can also try playing with positioning and z-index if clearing doesn't work. It's going to depend heavily on how your HTML and CSS is structured. If that <ol> thumbnail list can wiggle it's way underneath the slider, it will. And nobody likes not being able to click stuff!

In my case, solution was simple.
Thumbnails work well, but its "under" the slides. Just set .flex-control-nav with high z-index.
.flex-control-nav{
z-index:500;
}
Should work.

Load flexslider after a fancybox div has opened

I've used flexslider and fancybox numerous times and both are great plugins. Separately, both these work great on a site I'm doing but the problem I'm going to describe now occurs when a flexslider gallery is places inside a fancybox div. I must point out this is a responsive website so there are no static widths, all widths are percentage based.
At first everything seems to be working. I load fancybox and flexslider displays as it should, its width 50% of the fancybox container. But if I add display: none; to the fancybox div which it needs to hide the div until its called upon, when fancybox loads all the images in flexslider are tiny, though the width of the flexslider div is correct. I'm assuming that because flexslider loads when the page does it has no idea what its width is. Which is why this doesn't occur when display: none; is set.
My javascript to load the 2 plugins currently looks like this:
// =FANCYBOX
$(".fancybox").fancybox({
padding : 2,
nextEffect: 'fade',
prevEffect: 'fade',
title: false,
});
// =FLEXSLIDER
$(function(){
if($(".flexslider").length > 0) {
$(".flexslider").addClass("loading");
// Can also be used with $(document).ready()
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
directionNav: false,
slideshowSpeed: 5000,
animationSpeed: 360,
easing: "easeInQuad",
useCSS: false,
start: function(slider){
$('.flexslider').removeClass('loading');
}
});
});
}
});
Does anyone know how I can force flexslider to initialise again after fancybox is visible?
Thanks,
Steve

Try initializing flexslider inside fancybox's afterShow callback like :
jQuery(document).ready(function($){
$(".fancybox").fancybox({
padding : 2,
nextEffect: 'fade',
prevEffect: 'fade',
title: false,
afterShow: function(){
$('.flexslider').flexslider({
// flexlslider options
});
}
}); // fancybox
}); // ready

you should avoid display:none; for fancybox, so flexslider can determine image size properly.
this trick may help you:
put fancybox div inside a parent div.
set visibility:hidden; for fancybox div.
set display:none; for parent div.
hope that it helps.

flexslider and flexcarousel on one page

When I try to use "basic flexlisder" (http://flexslider.woothemes.com/index.html) and "basic carousel" (http://flexslider.woothemes.com/basic-carousel.html) on one page, carousel does not display properly. I guessed it's fault of clashing class names (since both are in <div class="flexslider">). However, after analyzing source code on flexslider page, I found they put the carousel in <div class="flexslider carousel"> , unlike what is written in the example, but it still did not help. Carousel still behaves like slider.
I also tried copying styles for new class, which I called flexcarousel, but it didn't work (even after making changes in jquery call as well). Anyone has simple example of slider and carousel working on a simple page?
My javascript:
<script type="text/javascript">
//slideshow
$(window).load(function() {
$('.flexslider').flexslider({
animation : "slide",
start : function(slider) {
$('body').removeClass('loading');
}
});
});
//carousel
$(window).load(function() {
$('.flexcarousel').flexslider({
animation : "slide",
animationLoop : false,
itemWidth : 210,
itemMargin : 5,
minItems : 2,
maxItems : 4
});
});
</script>

The carousel class does not actually make it a carousel, you have to assign the items a width using itemWidth, within the options:
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210, // Must have a size set for it to switch to carousel view.
});
});
Make sure to use different IDs to target each individual flexslider (if you have more than one):
<div id="main-slider" class="flexslider">
<div id="secondary-slider" class="flexslider">

Flexsilder issue - playing in the descending order

I'm not sure whether this is a css or JS issue. I have installed the flexslider plugin' which seems to have been installed correctly however I have a problems with the flexslider carousel, code posted at github. My sliders are playing in descending order, i'm not quite sure why or how it's doing this... below is the Jquery in corresponding JS
$(window).load(function(){
$('.flexslider').flexslider({
animation: "fade",
animationLoop: true,
slideshow:true,
directionNav: true,
minItems: 1,
maxItems: 1,
controlsContainer: false,
manualControls: '.custom-controls li',
start: function(slider){
$('body').removeClass('loading');
}
});
});
My Example Site

Maybe you are overriding flex-slider CSS from your own CSS? Maybe you have floated flex-slider's contents (image, div or what ever) to right or reverse direction? If so try to fix that :)
I have tested this after seeing your post. So I changed flex-slider inline float:left to float: right and now I get last slide as first slide and all slides are reversed.

It's a bug in Flexslider 2.2.2.
Downli
https://github.com/woothemes/FlexSlider