woocommerce/flexslider

An awesome, fully responsive jQuery slider plugin

WooCommerce Monorepo

Welcome to the WooCommerce Monorepo on GitHub. Here you can find all of the plugins, packages, and tools used in the development of the core WooCommerce plugin as well as WooCommerce extensions. You can browse the source, look at open issues, contribute code, and keep tracking of ongoing development.

We recommend all developers to follow the WooCommerce development blog to stay up to date about everything happening in the project. You can also follow @DevelopWC on Twitter for the latest development updates.

Getting Started

To get up and running within the WooCommerce Monorepo, you will need to make sure that you have installed all of the prerequisites.

Prerequisites

• NVM: While you can always install Node through other means, we recommend using NVM to ensure you're aligned with the version used by our development teams. Our repository contains an .nvmrc file which helps ensure you are using the correct version of Node.
• PNPM: Our repository utilizes PNPM to manage project dependencies and run various scripts involved in building and testing projects.
• PHP 7.4+: WooCommerce Core currently features a minimum PHP version of 7.4. It is also needed to run Composer and various project build scripts. See troubleshooting for troubleshooting problems installing PHP.
• Composer: We use Composer to manage all of the dependencies for PHP packages and plugins.

Once you've installed all of the prerequisites, you can run the following commands to get everything working.

# Ensure that you're using the correct version of Node
nvm use
# Install the PHP and Composer dependencies for all of the plugins, packages, and tools
pnpm install
# Build all of the plugins, packages, and tools in the monorepo
pnpm build

At this point you are now ready to begin developing and testing. All of the build outputs are cached running pnpm build again will only build the plugins, packages, and tools that have changed since the last time you ran the command.

Check out our development guide if you would like a more comprehensive look at working in our repository.

Repository Structure

• Plugins: Our repository contains plugins that relate to or otherwise aid in the development of WooCommerce.
  • WooCommerce Core: The core WooCommerce plugin is available in the plugins directory.
• Packages: Contained within the packages directory are all of the PHP and JavaScript provided for the community. Some of these are internal dependencies and are marked with an internal- prefix.
• Tools: We also have a growing number of tools within our repository. Many of these are intended to be utilities and scripts for use in the monorepo, but, this directory may also contain external tools.

Reporting Security Issues

To disclose a security issue to our team, please submit a report via HackerOne here.

Support

This repository is not suitable for support. Please don't use our issue tracker for support requests, but for core WooCommerce issues only. Support can take place through the appropriate channels:

• If you have a problem, you may want to start with the self help guide.
• The WooCommerce.com premium support portal for customers who have purchased themes or extensions.
• Our community forum on wp.org which is available for all WooCommerce users.
• The Official WooCommerce Facebook Group.
• For customizations, you may want to check our list of WooExperts or Codeable.

NOTE: Unfortunately, we are unable to honor support requests in issues on this repository; as a result, any requests submitted in this manner will be closed.

Community

For peer to peer support, real-time announcements, and office hours, please join our slack community!

Contributing to WooCommerce

As an open source project, we rely on community contributions to continue to improve WooCommerce. To contribute, please follow the pre-requisites above and visit our Contributing to Woo doc for more links and contribution guidelines.

flexslider's Issues

The Slider Doesn't load until the Images Load

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.

Nasty webkit text rendering.

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

Separate animation types for click vs. touch

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.

Disable touch slide.

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.

Slides -100px off on load

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.

Fixed positioned element flickering

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.

animationLoop, directioNav both false

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

Vertical slide direction

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.

When animation is set to "slide", controlNav buttons disappear.

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"?

A FlexSlider inside a slide of another FlexSlider

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?

FlexSlider not showing on IE9

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

Flickering vertical line on animate in Safari

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.

Animate container height?

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 );
}

Prev and Next controls do not fire before/after functions

Prev and Next controls do not fire before/after functions

When animation: " slide" is selected, previous and next buttons are clipped

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

Delay on first image

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

Purple scrollbars in Chrome?

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!

start function never fires if only one slide in slider

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.

If slider contains links, it is broken after tabbing through it

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.

Form / Input text field not working in Chrome/Safari

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

Margin issue within 960 grid

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]

Non-circular

Hi

Awesome plugin. Thanks.

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

Thanks!

controlNav doesn't work in Chrome 5.0.375.38 beta

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.

Ajax lazy load slides?

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

need a way to stop slider on demand

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');

ControlNav hidden on multiple sliders for slide animation

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?

Example of caption in step 2 on the home page

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>

Touchmove (iOS) stops animation loop

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

Callbacks

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!

.slider hardcoded in plugin

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.

Any plans for custom easing?

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.

"slide" mode not working in IE8

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

horizontal slide animation seems a little 'choppy'

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"
      });
    });

Slider doesn't show up properly

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

Deprecated webkit transitions

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."

Generic classnames collide

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.

Choppy slide transition in Chrome for embedded video

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.

Creating Multiple Instances in Jquery mobile

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  });
  });

});

The cloning of first and last <li> messes up any markup with ID´s.

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.

scroll wheel functionality bug in jquery 1.7

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

Touch Sliding doesn't clear the default

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 ?

Keyboard control of pause/play button

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!

Should reset for a:focus

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.

Default styles not set on <ul> tags

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;

Use CSS3 Transitions for slide and fade effects

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!

No way to move to a specific slide by javascript

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.

Vertical Slide

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.

Images not showing up

BlackBerry

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

Slow loading with yepnope

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.