Hi

Awesome plugin. Thanks.

Is there any way to make it non-circular easily?

Thanks!

I love this plugin but became incredibly frustrated when I was trying to tie Youtube into the workflow.

First slide is Youtube video followed by two image slides. I have Youtube events updating a variable and if the user hasn't clicked play before the sliding interval kicks in then it should act like a normal slider but if the video is playing as known by playerState then it should pause and not go to second slide.

Basically, I have tried the before() callback, which IMHO should allow one to pause the slideshow on the spot before it progresses.

before: function(slider){
    if (playerState != -1 && playerState != 0) {
        slider.pause();
    }
}

I am new to building jQuery plugins but there should also be some way to interact with the slider object from outside itself so that people can pause/resume it based on other javascript events. ie so that when Youtube picks up a state change I can say flexslider.pause/resume(). I noticed the jQuery cycle plugin handles this by allowing you to basically call the flexslider function again like so maybe if it could work similar.

$('#cont').flexslider('pause');

is it possible to add a delay to the first image and for it to slide in from the right?

The only browser it seems to have trouble with is Chrome (currently using 15.0.874.121.).
It loads the first image, but it does not display it. This is how I have yepnope set up. I know it is a bit weird, but this seems to work the best for your plugin.

    test: document.getElementsByClassName('flexslider').length,
    yep: {
        'FlexsliderJS': 'amazon!plugins/flexslider/flexslider.js',
        'FlexsliderCSS': 'amazon!plugins/flexslider/flexslider.css'
    },
    callback: {
        'FlexsliderCSS' : function(url, result, key){
            console.info('Loaded: FlexsliderCSS');
            $('.flexslider').flexslider();
        }
    }
},

I have noticed that if set a timeout on yepnope, it will load your script, of course, faster.

Is there a way to generate the next/previous slides via ajax lazy load method?

A lot more noticeable if animationDuration is set to a large number ..

    $(window).load(function() {
      $('.flexslider').flexslider({
        animation: "slide",
        animationDuration: 5000,
        slideshowSpeed: 7000,
        controlsContainer: ".flex-container"
      });
    });

Hello there,

Wonderful slider! Thank you for sharing. I am interested in using this slider as we move to responsive design but I noticed that embedded YouTube video is choppy in Chrome when using the "slide" animation. Is there a fix for this? Sometimes it slides out of the viewport and sometimes it doesn't and when it does, it is still visible on screen. Thanks.

FlexSlider's Javascript animations are a bit choppy on iOS. Since FlexSlider is responsive (can be used nicely with a wide array of devices) and support touch swipes, it would be awesome if the JS animations could be a fallback for hardware accelerated CSS to make the slides and fades smooth on iOS (and perhaps other platforms).

Also, great work on the slider!

Unlike in Safari 5.1.2 & Firefox 8.0.1, the links in the controlNav don't affect the slideshow in Chrome 5.0.375.38 beta.

Hi,
I was trying to put a FlexSlider inside a slide of another FlexSlider,
when I've done that I've noticed that when I click on the next button (of the FlexSlider that contain the other FlexSlider), the slides continue to show a number of empty slide like the number of slide that the inside FlexSlider have.

How can I solve this issue?

One of the features I used a lot in jQ cycle was custom easing. any plans on putting that in Flexslider? It's probably just a matter of adding an argument to the .animate functions, and adding a configuration option.

When animationLoop and directionNav are both set to false, the animationLoop logic will try to interact with a non-existent directionNav item, causing the slider to throw an error and break. Need to add boolean checks to animationLoop logic

You may have more transitions in the works but one that I think would be useful is a vertical slide. This would be a nice alternative to the horizontal slide you already have in place. Food for thought.

When having a fixed element (such as a top fixed menu bar) and a Flexslider with animation: slide on the same page, the fixed element starts to flicker on scroll as if it can't keep up with the scroll action. This happens only on Safari, and setting the animation to fade solves the issue.

This might be related to issue #26, but setting -webkit-backface-visibility: hidden; does not solve the problem.

This may sound wierd, but i use the slider on multiple pages. Some where i need to run a validation before going to the next slide, thus, if the user swipes to the next slide, the will be no validation being run.

So i need to be able to disable the touch/swipe slide OR better yet, stop the swipe until the page is valid.

I just noticed that my DIVs with ID's inside the slider where not applied in the right place, flexslider creates clones of the first and last < li > containers and all content inside them.

Is there any way to avoid cloning?

Or maybe add a notice about them being cloned, so more people can avoid the headaches and dont use ID's inside the slider containers.

EDIT: After looking into possible solutions:

var cloneHeight = $('.clone').height();
$('.clone').css('height', cloneHeight);
$('.clone').empty();

Takes care of the ID issue, not sure if it casues other problems though.

scrolling up & down with the scroll wheel both go back in the slider. both in 1.7.0 and 1.7.1.

Hey,

I currently use the FlexSlider on a website and have seme problems.
The slider doesn't show up properly on every page load. It often just doesn't appear on site. Indeed the code is loaded, no js-error is output but it seems the DOM is not changed, I can't see the js working in the HTML code as is should when sliding.

You can see the issue here: http://2issue.de/index.php?id=1
Any ideas how to solve this problem?

Thanks a lot!
-Anselm

First off, great work.

One feature I'd love to see is the separation of animation types based on interaction. For example, a click could use the fade transition to avoid long movement when selecting opposite ends of a range and a touch event could use slide to enhance the overall experience.

I am noticing on first load the slides are -100px off (not the -100 on the UL):

any ideas on how I can fix this? change the value to 0 in the web inspector fixes it...

Cheers.

Since the pause/play button is a span, it can't be tabbed to or toggled by hitting the enter key. It would be good for accessibility to enable pause/play via the keyboard. The prev/next and other controls work fine via the keyboard.

I love this plugin, the responsive features work great and it is easy to configure, thanks!

I've noticed I'm getting purple scrollbars on the browser window when using the FlexSlider code. I can't find any CSS code that would change the scrollbars.

This can be seen on the FlexSlider homepage (and any pages where I include the FlexSlider .js file). I'm only seeing this in Google Chrome; FF and IE are displaying the scrollbars normally.

I've noticed the following order of events when I load http://flex.madebymufffin.com in Chrome :

1. Page starts loading. Scrollbars look fine.
2. Page flickers (as if other files have loaded and updated the page). This is when the scrollbars are turned the purple color.

Screenshot:
http://imgur.com/Ykveb

I'm running Windows 7, 64bit - SP1

Thanks for looking into this!

using this on dynamic site, and some instances of the slider only contain one slide in certain states. when this happens, the start function never fires.

I have two slidesshows on interior pages of a mobile app, using jquery mobile. The slide shows do not show when I navigate to the page, however if I reload the page once I get there (or if I go directly there) the slide show works. However If I go to the second slide show page it does not show. I have played with .live .load .ready etc without luck.

I would say it is 95% likely an error on my part, but I thought I would ask.

$(document).ready(function(){
$('#swipeFlexPageOne').load('pageshow',function(event){
alert ('one');
$(this).flexslider({
animation: "slide",
controlsContainer: "#flexImageSliderContainerOne",
directionNav: false,
controlNav: false,
mousewheel: true });
});

$('#swipeFlexPageTwo').load('pageshow',function(event){
    alert ('two');
    $(this).flexslider({
        animation: "slide",
        controlsContainer: "#flexImageSliderContainerTwo",
        directionNav: false,         
        controlNav: false,
        mousewheel: true  });
  });

});

Everything is in the subject ;-)
Something like this (don't know if there are other options)...

<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li>
<img src="slide1.jpg" />
</li>
<li>
<img src="slide2.jpg" />
<p class="flex-caption">Captions and cupcakes. Winning combination.</p>
</li>
<li>
<img src="slide3.jpg" />
</li>
</ul>
</div>

When the panels use the slide animation I'm seeing a flickering vertical white line appear over the images/panels as they animate in Safari only. This is visible with both click transitions and slideshow. Safari is version 5.1.1 on PC.

Also tested on FF 8, IE 9, Chrome 15 and they did not have this issue.

In a perfect world, everyone would encapsulate their stuff in own containers, and target only these class'es.

To use this in as many webapps as possible, I suggest getting rid of the generic classnames and set more restrictive rules for the css.

Is there an easy way to change the direction of the vertical slide. By default, the slides animate up to the next slide. I'm looking to reverse that, so the slides animate down when transitioning to the next slide.

Nice updates to 1.8! Great improvements to an already great plugin.

If I use images with varying (and unknown) heights, how can I get the container to animate to the correct size instead of "jumping" to the correct size?

I tried using the "before: function(){}," but it didn't work...

function onBefore() {
var $ht = $(this).height();
$(this).parent().animate({height: $ht}, 500 );
}

Take this scenario :

You have a Poorly built Mobile Site ( Media Queries ) and it produces a horizontal scrollbar, now the problem is that when you swipe, the page moves along with it, is there a way to prevent that ?

Using an input field within the slider is breaking the fields display and then the slide feature.

• Adding a simple form inside the slider:
  form class="emailform"
  input type="text" name="email" class="emailinput" width="90"
  input type="image" src="static/img/submit.png" width="65" height="28" value="Submit"
  /form
• Then trying to type in the field
• Field does not move with the text as it is typed and after typing around 30/40 characters the slider then starts to move with each extra character.

Any ideas?
Thanks

I implemented the FlexSlider and changed the animation style from "fade" to "slide". That works correctly, but the controlNav buttons disappear. The same happens when I tired to override the $.flexslider.defaults.animation value. Has anyone realized the same "feature"?

I used this awesome slider for showing my latest blog posts. There are also links in it and when I want tab link to link through my page, the slider shows about the half of an item. Example is here: http://raphaa.de. I think it is clearer when you can see it.

Prev and Next controls do not fire before/after functions

In webkit browsers, text inside the flexslider becomes jagged, it appears to have lost any antialiasing. It appears that the issue is caused by the CSS3 transition using translate3d as a webkit transform.

And here's why: http://stackoverflow.com/questions/8024061/webkit-blurry-text-with-css-scale-translate3d

I also think that this is the cause of this other issue. https://github.com/mbmufffin/FlexSlider/issues/26

First of all, great work! Thanks for sharing :)

You may have this on your radar when you decide to implement more theme options. I think the ones you have are very useful and probably don't need many more. However, one very useful option for me is the ability to have a callback function either before or after the slide transition. In some cases, I have a video (youtube, vimeo) in which I've used a callback to comunicate with the their respective API's to stop playing the video when the slide makes a transition. I'm sure there are plenty of other examples and uses as well, this just how I tend to use callback. I thought I would put a bug in your ear with this and see what happens. Thanks again for putting this out there for all to use!

I don't think it's good that the .slides class is hardcoded in. Sometimes the ul that contains slides may be coming from a CMS or external system and you can't control the markup.

Other times you may have a list of slides that already has a semantic class name and adding a .slides class would reduce the semantic meaning of your document. If I could pass in ".tweets" as an argument to find the slides that would be better.

Or, if we're still keeping the ul parent element hardcoded into the plugin, it's also an option to just select the first-child

tag starting from the element on which Flexslider is invoked.

After sliding on iOS (touchmove), the animation loop stops regardless pauseOnAction or animationLoop settings. After sliding left or right the animation should resume.

Tried on several sites and seems to be consistent but "slide" mode doesn't seem to be working properly in IE8.
It always shows the last slide if set to this. Fade mode works fine though.

Live site with issue is kevinscullion.com

I have tried asking on the site community and also via twitter but not had a response. I have an issue with a large left margin being added to my slides.

http://cl.ly/220q2p3T2b0o150Q2y1L. Please contact me for a live URL. [email protected]

I have two sliders on a page, there will be more, but only the first instance shows the control nav properly. For the others, it gets clipped because of the overlow:hidden for slide animations.

Anybody else encountered this same problem, and has a fix?

Having an issue with FlexSlider not displaying. Random. Can't figure it out. It works on most machines I've tested. Windows 7, IE 9. Can you take a look?

http://bit.ly/Y9Tbw

We've had to add each instance of the flex slider object to the Dom via jquery .data() purely in order to get a handle to each slider object so we can expose some of the internal functions to be called publicly.

The means other JavaScript can call e.g. FlexAnimate() to move to a specific slide.

Is there an easier way - the default slider nav binds clicks internally.

The following warning is fired every single time you click to a new slide.

"event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future."

Both ul.slides and ul.flex-direction-nav are missing reset styles in flexslider.css. Several reset.css files do not set the following for you which cause the flexslider to be styled incorrectly by default.

list-style-type:none;
margin:0;
padding:0;

When animation:slide is selected vs "fade", in your Demo, the previous and next icons are clipped.
v1.8

I would suggest that the Slider Would load ( The HTML ) and then maybe the user could be prolonged by a loading .gif image, images could then be loaded in the background and then displayed when done, in the meantime, the next and previous buttons wont be loaded and the pagination-style nav wont be loaded, only an animated .gif.

Do you know if this slider is compatible with BlackBerry devices running OS 5?

Noticed these horizontal lines due to a:focus not being reset.
http://i.imgur.com/XtIQe.png

In my case i use the twitter bootstrap css framework and and resetting appears to fix it.

I'll submit a fix soon.