Skip to content

Commit

Permalink
Merge pull request #1338 from woothemes/release-2-5-0
Browse files Browse the repository at this point in the history
Release 2 5 0
  • Loading branch information
jeffikus committed May 22, 2015
2 parents 6df2881 + 507210b commit 9c4e6f8
Show file tree
Hide file tree
Showing 16 changed files with 239 additions and 22 deletions.
14 changes: 12 additions & 2 deletions README.mdown
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
[![Gitter chat](https://badges.gitter.im/woothemes/FlexSlider.png)](https://gitter.im/woothemes/FlexSlider)

# FlexSlider 2.4.0
# FlexSlider 2.5.0
http://www.woothemes.com/flexslider/ - Copyright (c) 2015 WooThemes

## Releases
Expand All @@ -19,6 +19,10 @@ To keep up to date with how FlexSlider's development roadmap looks, please see o

## Updates

** Version 2.5.0 **

** Bumped compatibility support starting with jQuery 1.7+. pausePlay icon fix. Firefox touch event fix. Adds customDirectionNav param **

** Version 2.4.0 **

** Update for improved standards. Adds classes to li nav elements. Reset for li elements in stylesheet. **
Expand All @@ -44,7 +48,7 @@ To keep up to date with how FlexSlider's development roadmap looks, please see o
## General Notes
FlexSlider is no longer licensed under the MIT license. FlexSlider now uses the license, GPLv2 and later.

In an effort to move the plugin forward, support for jQuery 1.3.2 has been dropped. The plugin now requires jQuery 1.4.2+. If you don't have access to the later versions of jQuery, [FlexSlider 1.8](https://github.com/woothemes/FlexSlider/tree/flexslider1) should be a perfectly suitable substitute for your needs!
In an effort to move the plugin forward, support for jQuery 1.4.2 has been dropped. The plugin now requires jQuery 1.7.0+. If you don't have access to the later versions of jQuery, [FlexSlider 1.8](https://github.com/woothemes/FlexSlider/tree/flexslider1) should be a perfectly suitable substitute for your needs!

Your old styles and properties *might not work out of the box*. Some property names have been changed, noted below, as well as namespacing prefixes being applied to all elements. This means that `.flex-direction-nav .next` is now `.flex-direction-nav .flex-next` by default. The namespacing property is exposed, free for you to change.

Expand All @@ -69,6 +73,7 @@ Two new methods are available for adding/removing slides, `slider.addSlide()` an
## Examples

- [Basic Slider](http://flexslider.woothemes.com/)
- [Basic Slider customDirectionNav](http://flexslider.woothemes.com/basic-slider-with-custom-direction-nav.html)
- [Slider w/thumbnail controlNav pattern](http://flexslider.woothemes.com/thumbnail-controlnav.html)
- [Slider w/thumbnail slider](http://flexslider.woothemes.com/thumbnail-slider.html)
- [Basic Carousel](http://flexslider.woothemes.com/basic-carousel.html)
Expand Down Expand Up @@ -137,6 +142,11 @@ Previously called "keyboardNav" in v1.8 and below.
### controlsContainer: *{updated}*
`controlsContainer` is one of the more painstaking, potentially confusing properties within FlexSlider. First, the property is no longer required to workaround `overflow: hidden` on slide animation. Second, the property now accepts a **jQuery object**, giving you precise control over the object you want. The plugin no longer attempts to guess what element you are selecting.

### customDirectionNav: *{new}*
`customDirectionNav` allows the ability to add custom directional navigation elements. Can be used in conjunction with controlsContainer for pagination controls container.

*[Example of customDirectionNav being used](http://flexslider.woothemes.com/basic-slider-with-custom-direction-nav.html)*

### sync: *{new}*
`sync` is a new property that will allow other slider(s) to hook into the current slider via a given selector. The selector should describe an object that has already been initialized as a FlexSlider. Right now, `sync` will synchronize animation, play, and pause behaviors. More behaviors can be added in the future as the property matures.

Expand Down
8 changes: 7 additions & 1 deletion changelog.txt
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,10 @@ FLEXSLIDER CHANGELOG
* Fix for pauseInvisible attribute for Chrome and the Page Visibility API

2015.02.27 - Version 2.4.0
* Update for improved standards. Adds classes to li nav elements. Reset for li elements in stylesheet.
* Update for improved standards. Adds classes to li nav elements. Reset for li elements in stylesheet.

2015.05.19 - Version 2.5.0
* CSS fix for pausePlay play icon.
* Firefox touchstart event fix.
* Compatibility change for jQuery to 1.7.0+
* Adds customDirectionNav param for custom navigation controls
2 changes: 1 addition & 1 deletion css/theme.less
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,7 @@

}

.flex-play:before {
&.flex-play:before {

content: @flex-pauseplay-icon-play;

Expand Down
1 change: 1 addition & 0 deletions demo/basic-carousel.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ <h3 class="header-nav">Other Examples</h3>
<nav>
<ul>
<li><a href="index.html">Basic Slider</a></li>
<li><a href="basic-slider-with-custom-direction-nav.html">Basic Slider customDirectionNav</a></li>
<li><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
<li><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
<li class="active"><a href="basic-carousel.html">Basic Carousel</a></li>
Expand Down
183 changes: 183 additions & 0 deletions demo/basic-slider-with-custom-direction-nav.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,183 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta content="charset=utf-8">
<title>FlexSlider 2</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

<!-- Demo CSS -->
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../flexslider.css" type="text/css" media="screen" />

<!-- Modernizr -->
<script src="js/modernizr.js"></script>

<style>
.flexslider {
margin-bottom: 10px;
}

.flex-control-nav {
position: relative;
bottom: auto;
}

.custom-navigation {
display: table;
width: 100%;
table-layout: fixed;
}

.custom-navigation > * {
display: table-cell;
}

.custom-navigation > a {
width: 50px;
}

.custom-navigation .flex-next {
text-align: right;
}
</style>

</head>
<body class="loading">

<div id="container" class="cf">
<header role="navigation">
<a class="logo" href="http://www.woothemes.com" title="WooThemes">
<img src="images/logo.png" alt="WooThemes" />
</a>
<h1>FlexSlider 2</h1>
<h2>The best responsive slider. Period.</h2>
<a class="button green" href="https://github.com/woothemes/FlexSlider/zipball/master">Download Flexslider</a>
<h3 class="nav-header">Other Examples</h3>
<nav>
<ul>
<li><a href="index.html">Basic Slider</a></li>
<li class="active"><a href="basic-slider-with-custom-direction-nav.html">Basic Slider customDirectionNav</a></li>
<li><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
<li><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
<li><a href="basic-carousel.html">Basic Carousel</a></li>
<li><a href="carousel-min-max.html">Carousel with min and max ranges</a></li>
<li><a href="dynamic-carousel-min-max.html">Carousel with dynamic min/max ranges</a></li>
<li><a href="video.html">Video & the api (vimeo)</a></li>
<li><a href="video-wistia.html">Video & the api (wistia)</a></li>
</ul>
</nav>
</header>

<div id="main" role="main">

<section class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="images/kitchen_adventurer_lemon.jpg" />
</li>
<li>
<img src="images/kitchen_adventurer_donut.jpg" />
</li>
<li>
<img src="images/kitchen_adventurer_caramel.jpg" />
</li>
</ul>
</div>
<div class="custom-navigation">
<a href="#" class="flex-prev">Prev</a>
<div class="custom-controls-container"></div>
<a href="#" class="flex-next">Next</a>
</div>
</section>

<aside>
<div class="cf">
<h3>Basic Slider</h3>
<ul class="toggle cf">
<li class="js"><a href="#view-js">JS</a></li>
<li class="html"><a href="#view-html">HTML</a></li>
</ul>
</div>
<div id="view-js" class="code">
<pre class="brush: js; toolbar: false; gutter: false;">
// Can also be used with $(document).ready()
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
controlsContainer: $(".custom-controls-container"),
customDirectionNav: $(".custom-navigation a")
});
});
</pre>
</div>
<div id="view-html" class="code">
<pre class="brush: xml; toolbar: false; gutter: false;">
&lt;!-- Place somewhere in the &lt;body&gt; of your page -->
&lt;div class="flexslider">
&lt;ul class="slides">
&lt;li>
&lt;img src="slide1.jpg" />
&lt;/li>
&lt;li>
&lt;img src="slide2.jpg" />
&lt;/li>
&lt;li>
&lt;img src="slide3.jpg" />
&lt;/li>
&lt;li>
&lt;img src="slide4.jpg" />
&lt;/li>
&lt;/ul>
&lt;/div>
&lt;div class="custom-navigation">
&lt;a href="#" class="flex-prev">Prev&lt;/a>
&lt;div class="custom-controls-container">&lt;/div>
&lt;a href="#" class="flex-next">Next&lt;/a>
&lt;/div>
</pre>
</div>
</aside>
</div>

</div>

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>

<!-- FlexSlider -->
<script defer src="../jquery.flexslider.js"></script>

<script type="text/javascript">
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
controlsContainer: $(".custom-controls-container"),
customDirectionNav: $(".custom-navigation a"),
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>


<!-- Syntax Highlighter -->
<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="js/shBrushXml.js"></script>
<script type="text/javascript" src="js/shBrushJScript.js"></script>

<!-- Optional FlexSlider Additions -->
<script src="js/jquery.easing.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script defer src="js/demo.js"></script>

</body>
</html>
1 change: 1 addition & 0 deletions demo/carousel-min-max.html
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ <h3 class="nav-header">Other Examples</h3>
<nav>
<ul>
<li><a href="index.html">Basic Slider</a></li>
<li><a href="basic-slider-with-custom-direction-nav.html">Basic Slider customDirectionNav</a></li>
<li><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
<li><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
<li><a href="basic-carousel.html">Basic Carousel</a></li>
Expand Down
3 changes: 2 additions & 1 deletion demo/dynamic-carousel-min-max.html
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@ <h2>The best responsive slider. Period.</h2>
<h3 class="header-nav">Other Examples</h3>
<nav>
<ul>
<li><a href="demo">Basic Slider</a></li>
<li><a href="index.html">Basic Slider</a></li>
<li><a href="basic-slider-with-custom-direction-nav.html">Basic Slider customDirectionNav</a></li>
<li><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
<li><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
<li><a href="basic-carousel.html">Basic Carousel</a></li>
Expand Down
3 changes: 2 additions & 1 deletion demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@ <h2>The best responsive slider. Period.</h2>
<h3 class="nav-header">Other Examples</h3>
<nav>
<ul>
<li class="active"><a href="demo">Basic Slider</a></li>
<li class="active"><a href="index.html">Basic Slider</a></li>
<li><a href="basic-slider-with-custom-direction-nav.html">Basic Slider customDirectionNav</a></li>
<li><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
<li><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
<li><a href="basic-carousel.html">Basic Carousel</a></li>
Expand Down
1 change: 1 addition & 0 deletions demo/thumbnail-controlnav.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ <h3 class="nav-header">Other Examples</h3>
<nav>
<ul>
<li><a href="index.html">Basic Slider</a></li>
<li><a href="basic-slider-with-custom-direction-nav.html">Basic Slider customDirectionNav</a></li>
<li class="active"><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
<li><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
<li><a href="basic-carousel.html">Basic Carousel</a></li>
Expand Down
1 change: 1 addition & 0 deletions demo/thumbnail-slider.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ <h3 class="nav-header">Other Examples</h3>
<nav>
<ul>
<li><a href="index.html">Basic Slider</a></li>
<li><a href="basic-slider-with-custom-direction-nav.html">Basic Slider customDirectionNav</a></li>
<li><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
<li class="active"><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
<li><a href="basic-carousel.html">Basic Carousel</a></li>
Expand Down
1 change: 1 addition & 0 deletions demo/video-wistia.html
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ <h3 class="nav-header">Other Examples</h3>
<nav>
<ul>
<li><a href="index.html">Basic Slider</a></li>
<li><a href="basic-slider-with-custom-direction-nav.html">Basic Slider customDirectionNav</a></li>
<li><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
<li><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
<li><a href="basic-carousel.html">Basic Carousel</a></li>
Expand Down
1 change: 1 addition & 0 deletions demo/video.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ <h3 class="nav-header">Other Examples</h3>
<nav>
<ul>
<li><a href="index.html">Basic Slider</a></li>
<li><a href="basic-slider-with-custom-direction-nav.html">Basic Slider customDirectionNav</a></li>
<li><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
<li><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
<li><a href="basic-carousel.html">Basic Carousel</a></li>
Expand Down
4 changes: 2 additions & 2 deletions flexslider.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
* jQuery FlexSlider v2.4.0
* jQuery FlexSlider v2.5.0
* http://www.woothemes.com/flexslider/
*
* Copyright 2012 WooThemes
Expand Down Expand Up @@ -190,7 +190,7 @@ html[xmlns] .flexslider .slides {
.flex-pauseplay a:hover {
opacity: 1;
}
.flex-pauseplay a .flex-play:before {
.flex-pauseplay a.flex-play:before {
content: '\f003';
}
.flex-control-nav {
Expand Down
2 changes: 1 addition & 1 deletion flexslider.less
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
* jQuery FlexSlider v2.4.0
* jQuery FlexSlider v2.5.0
* http://www.woothemes.com/flexslider/
*
* Copyright 2012 WooThemes
Expand Down
4 changes: 2 additions & 2 deletions jquery.flexslider-min.js

Large diffs are not rendered by default.

0 comments on commit 9c4e6f8

Please sign in to comment.