Skip to content
This repository was archived by the owner on Oct 16, 2024. It is now read-only.

Commit 91e323d

Browse files
jeffikusjeffikus
authored
Merge pull request #1698 from woocommerce/release-2-7-0
Release 2 7 0
2 parents 0d95828 + 557f82f commit 91e323d

26 files changed

Lines changed: 952 additions & 73 deletions

‎README.md‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
[![Gitter chat](https://badges.gitter.im/woothemes/FlexSlider.png)](https://gitter.im/woothemes/FlexSlider)
22

3-
# FlexSlider 2.6.4
4-
http://www.woocommerce.com/flexslider/ - Copyright (c) 2015 WooThemes
3+
# FlexSlider 2.7.0
4+
http://www.woothemes.com/flexslider/ - Copyright (c) 2015 WooThemes
55

66
## Releases
77

@@ -19,9 +19,9 @@ To keep up to date with how FlexSlider's development roadmap looks, please see o
1919

2020
## Updates
2121

22-
** Version 2.6.4 **
22+
** Version 2.7.0 **
2323

24-
** Fixes resize method call for orientationchange. **
24+
** Fixes resize method call for orientationchange. Adds RTL feature - param "rtl" added. **
2525

2626
** Version 2.6.3 **
2727

@@ -94,13 +94,20 @@ Two new methods are available for adding/removing slides, `slider.addSlide()` an
9494

9595
- [Basic Slider](http://flexslider.woothemes.com/)
9696
- [Basic Slider customDirectionNav](http://flexslider.woothemes.com/basic-slider-with-custom-direction-nav.html)
97+
- [Basic Slider with Simple Caption](http://flexslider.woothemes.com/basic-slider-with-caption.html)
9798
- [Slider w/thumbnail controlNav pattern](http://flexslider.woothemes.com/thumbnail-controlnav.html)
9899
- [Slider w/thumbnail slider](http://flexslider.woothemes.com/thumbnail-slider.html)
99100
- [Basic Carousel](http://flexslider.woothemes.com/basic-carousel.html)
100101
- [Carousel with min and max ranges](http://flexslider.woothemes.com/carousel-min-max.html)
102+
- [Carousel with min and max ranges](http://flexslider.woothemes.com/dynamic-carousel-min-max.html)
101103
- [Video with Vimeo API](http://flexslider.woothemes.com/video.html)
102104
- [Video with Wistia API](http://flexslider.woothemes.com/video-wistia.html)
103105

106+
## RTL Examples
107+
108+
- [Basic Slider](http://flexslider.woothemes.com/index-rtl.html)
109+
- [Slider with Simple Caption w/thumbnail slider](http://flexslider.woothemes.com/asnavfor-rtl.html)
110+
- [Basic Slider with Simple Caption](http://flexslider.woothemes.com/basic-carousel-rtl.html)
104111

105112
## Properties
106113

@@ -200,3 +207,7 @@ Description to be added.
200207

201208
### allowOneSlide: *{new}*
202209
Boolean. Whether or not you'd like FlexSlider to initialize as usual if only one slide is present.
210+
211+
### rtl: *{new}*
212+
Boolean. False by default. Supports RTL functionality in the slider.
213+
*Note: you must add `style="direction:rtl"` to your container div in order for this to work.*

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "flexslider",
3-
"version": "2.6.4",
3+
"version": "2.7.0",
44
"homepage": "https://github.com/woocommerce/FlexSlider",
55
"authors": [
66
"Automattic <jeff@woothemes.com>"

‎changelog.txt‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,5 +42,7 @@ FLEXSLIDER CHANGELOG
4242
2016.09.06 - Version 2.6.3
4343
* Rollback fade fixes, due to harsh fade reports.
4444

45-
2017.07.08 - Version 2.6.4
46-
* Fixes resize method call for orientationchange.
45+
2018.02.01 - Version 2.7.0
46+
* Fixes resize method call for orientationchange.
47+
* Adds RTL feature - param "rtl" added.
48+
* Adds RTL demo's.

‎demo/asnavfor-rtl.html‎

Lines changed: 310 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,310 @@
1+
<!DOCTYPE html>
2+
<html class="no-js" lang="en">
3+
<head>
4+
<meta content="charset=utf-8">
5+
<title>FlexSlider 2</title>
6+
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
7+
8+
<!-- Syntax Highlighter -->
9+
<link href="css/shCore.css" rel="stylesheet" type="text/css" />
10+
<link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" />
11+
<!-- Demo CSS -->
12+
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
13+
<link rel="stylesheet" href="../flexslider.css" type="text/css" media="screen" />
14+
<link rel="stylesheet" href="../flexslider-rtl.css" type="text/css" media="screen" />
15+
<!-- Modernizr -->
16+
<script src="js/modernizr.js"></script>
17+
18+
<style type="text/css">
19+
.flex-caption {
20+
width: 96%;
21+
padding: 2%;
22+
left: 0;
23+
bottom: 0;
24+
background: rgba(0,0,0,.5);
25+
color: #fff;
26+
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
27+
font-size: 14px;
28+
line-height: 18px;
29+
}
30+
li.css a {
31+
border-radius: 0;
32+
}
33+
</style>
34+
35+
</head>
36+
<body class="loading">
37+
38+
<div id="container" class="cf">
39+
<header role="navigation">
40+
<a class="logo" href="http://www.woothemes.com" title="WooThemes">
41+
<img src="images/logo.png" alt="WooThemes" />
42+
</a>
43+
<h1>FlexSlider 2</h1>
44+
<h2>The best responsive slider. Period.</h2>
45+
<a class="button green" href="https://github.com/woothemes/FlexSlider/zipball/master">Download Flexslider</a>
46+
<h3 class="nav-header">Other Examples</h3>
47+
<nav>
48+
<ul>
49+
<li><a href="index.html">Basic Slider</a></li>
50+
<li><a href="basic-slider-with-custom-direction-nav.html">Basic Slider customDirectionNav</a></li>
51+
<li><a href="basic-slider-with-caption.html">Basic Slider with Simple Caption</a></li>
52+
<li><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
53+
<li><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
54+
<li><a href="basic-carousel.html">Basic Carousel</a></li>
55+
<li><a href="carousel-min-max.html">Carousel with min and max ranges</a></li>
56+
<li><a href="dynamic-carousel-min-max.html">Carousel with dynamic min/max ranges</a></li>
57+
<li><a href="video.html">Video & the api (vimeo)</a></li>
58+
<li><a href="video-wistia.html">Video & the api (wistia)</a></li>
59+
</ul>
60+
</nav>
61+
<h3 class="nav-header">RTL Examples</h3>
62+
<nav>
63+
<ul>
64+
<li><a href="index-rtl.html">Basic Slider</a></li>
65+
<li class="active"><a href="asnavfor-rtl.html">Slider with Simple Caption w/thumbnail slider</a></li>
66+
<li><a href="basic-carousel-rtl.html">Basic Carousel</a></li>
67+
</ul>
68+
</nav>
69+
</header>
70+
71+
<div id="main" role="main">
72+
<section class="slider">
73+
<div class="flexslider" id="f1" style="direction:rtl">
74+
<ul class="slides">
75+
<li>
76+
<img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
77+
<p class="flex-caption">Adventurer Cheesecake Brownie</p>
78+
</li>
79+
<li>
80+
<img src="images/kitchen_adventurer_lemon.jpg" />
81+
<p class="flex-caption">Adventurer Lemon</p>
82+
</li>
83+
<li>
84+
<img src="images/kitchen_adventurer_donut.jpg" />
85+
<p class="flex-caption">Adventurer Donut</p>
86+
</li>
87+
<li>
88+
<img src="images/kitchen_adventurer_caramel.jpg" />
89+
<p class="flex-caption">Adventurer Caramel</p>
90+
</li>
91+
<li>
92+
<img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
93+
<p class="flex-caption">Adventurer Cheesecake Brownie</p>
94+
</li>
95+
<li>
96+
<img src="images/kitchen_adventurer_lemon.jpg" />
97+
<p class="flex-caption">Adventurer Lemon</p>
98+
</li>
99+
<li>
100+
<img src="images/kitchen_adventurer_donut.jpg" />
101+
<p class="flex-caption">Adventurer Donut</p>
102+
</li>
103+
<li>
104+
<img src="images/kitchen_adventurer_caramel.jpg" />
105+
<p class="flex-caption">Adventurer Caramel</p>
106+
</li>
107+
<li>
108+
<img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
109+
<p class="flex-caption">Adventurer Cheesecake Brownie</p>
110+
</li>
111+
<li>
112+
<img src="images/kitchen_adventurer_lemon.jpg" />
113+
<p class="flex-caption">Adventurer Lemon</p>
114+
</li>
115+
<li>
116+
<img src="images/kitchen_adventurer_donut.jpg" />
117+
<p class="flex-caption">Adventurer Donut</p>
118+
</li>
119+
<li>
120+
<img src="images/kitchen_adventurer_caramel.jpg" />
121+
<p class="flex-caption">Adventurer Caramel</p>
122+
</li>
123+
</ul>
124+
</div>
125+
<div class="flexslider carousel" id="f2" style="direction:rtl">
126+
<ul class="slides">
127+
<li>
128+
<img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
129+
</li>
130+
<li>
131+
<img src="images/kitchen_adventurer_lemon.jpg" />
132+
</li>
133+
<li>
134+
<img src="images/kitchen_adventurer_donut.jpg" />
135+
</li>
136+
<li>
137+
<img src="images/kitchen_adventurer_caramel.jpg" />
138+
</li>
139+
<li>
140+
<img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
141+
</li>
142+
<li>
143+
<img src="images/kitchen_adventurer_lemon.jpg" />
144+
</li>
145+
<li>
146+
<img src="images/kitchen_adventurer_donut.jpg" />
147+
</li>
148+
<li>
149+
<img src="images/kitchen_adventurer_caramel.jpg" />
150+
</li>
151+
<li>
152+
<img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
153+
</li>
154+
<li>
155+
<img src="images/kitchen_adventurer_lemon.jpg" />
156+
</li>
157+
<li>
158+
<img src="images/kitchen_adventurer_donut.jpg" />
159+
</li>
160+
<li>
161+
<img src="images/kitchen_adventurer_caramel.jpg" />
162+
</li>
163+
</ul>
164+
</div>
165+
</section>
166+
<aside>
167+
<div class="cf">
168+
<h3>Slider with Carousel Slider as Navigation - RTL</h3>
169+
<ul class="toggle cf">
170+
<li class="js"><a href="#view-js">JS</a></li>
171+
<li class="css"><a href="#view-css">CSS</a></li>
172+
<li class="html"><a href="#view-html">HTML</a></li>
173+
</ul>
174+
</div>
175+
<div id="view-js" class="code">
176+
<pre class="brush: js; toolbar: false; gutter: false;">
177+
// Can also be used with $(document).ready()
178+
$(window).load(function(){
179+
$('#f1').flexslider({
180+
animation: "slide",
181+
rtl: true,
182+
start: function(slider){
183+
$('body').removeClass('loading');
184+
}
185+
});
186+
$('#f2').flexslider({
187+
animation: "slide",
188+
animationLoop: false,
189+
itemWidth: 210,
190+
itemMargin: 5,
191+
pausePlay: true,
192+
mousewheel: true,
193+
rtl: true,
194+
asNavFor:'.flexslider'
195+
});
196+
});
197+
</pre>
198+
</div>
199+
<div id="view-css" class="code">
200+
<pre class="brush: xml; toolbar: false; gutter: false;">
201+
&lt;!-- Place either at the bottom in the &lt;head&gt; of your page or inside your CSS -->
202+
&lt;style type="text/css">
203+
.flex-caption {
204+
width: 96%;
205+
padding: 2%;
206+
left: 0;
207+
bottom: 0;
208+
background: rgba(0,0,0,.5);
209+
color: #fff;
210+
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
211+
font-size: 14px;
212+
line-height: 18px;
213+
}
214+
li.css a {
215+
border-radius: 0;
216+
}
217+
&lt;/style>
218+
</pre>
219+
</div>
220+
<div id="view-html" class="code">
221+
<pre class="brush: xml; toolbar: false; gutter: false;">
222+
&lt;!-- Place somewhere in the &lt;body&gt; of your page -->
223+
&lt;div class="flexslider" id="f1" style="direction:rtl">
224+
&lt;ul class="slides">
225+
&lt;li>
226+
&lt;img src="slide1.jpg" />
227+
&lt;p class="flex-caption">Adventurer Cheesecake Brownie&lt;/p>
228+
&lt;/li>
229+
&lt;li>
230+
&lt;img src="slide2.jpg" />
231+
&lt;p class="flex-caption">Adventurer Lemon&lt;/p>
232+
&lt;/li>
233+
&lt;li>
234+
&lt;img src="slide3.jpg" />
235+
&lt;p class="flex-caption">Adventurer Donut&lt;/p>
236+
&lt;/li>
237+
&lt;li>
238+
&lt;img src="slide4.jpg" />
239+
&lt;p class="flex-caption">Adventurer Caramel&lt;/p>
240+
&lt;/li>
241+
&lt;/ul>
242+
&lt;/div>
243+
&lt;div class="flexslider carousel" id="f2" style="direction:rtl">
244+
&lt;ul class="slides">
245+
&lt;li>
246+
&lt;img src="slide1.jpg" />
247+
&lt;/li>
248+
&lt;li>
249+
&lt;img src="slide2.jpg" />
250+
&lt;/li>
251+
&lt;li>
252+
&lt;img src="slide3.jpg" />
253+
&lt;/li>
254+
&lt;li>
255+
&lt;img src="slide4.jpg" />
256+
&lt;/li>
257+
&lt;/ul>
258+
&lt;/div>
259+
</pre>
260+
</div>
261+
</aside>
262+
</div>
263+
264+
</div>
265+
266+
<!-- jQuery -->
267+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
268+
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>
269+
270+
<!-- FlexSlider -->
271+
<script defer src="../jquery.flexslider.js"></script>
272+
273+
<script type="text/javascript">
274+
$(function(){
275+
SyntaxHighlighter.all();
276+
});
277+
$(window).load(function(){
278+
$('#f1').flexslider({
279+
animation: "slide",
280+
rtl: true,
281+
start: function(slider){
282+
$('body').removeClass('loading');
283+
}
284+
});
285+
$('#f2').flexslider({
286+
animation: "slide",
287+
animationLoop: false,
288+
itemWidth: 210,
289+
itemMargin: 5,
290+
pausePlay: true,
291+
mousewheel: true,
292+
rtl: true,
293+
asNavFor:'.flexslider'
294+
});
295+
});
296+
</script>
297+
298+
299+
<!-- Syntax Highlighter -->
300+
<script type="text/javascript" src="js/shCore.js"></script>
301+
<script type="text/javascript" src="js/shBrushXml.js"></script>
302+
<script type="text/javascript" src="js/shBrushJScript.js"></script>
303+
304+
<!-- Optional FlexSlider Additions -->
305+
<script src="js/jquery.easing.js"></script>
306+
<script src="js/jquery.mousewheel.js"></script>
307+
<script defer src="js/demo.js"></script>
308+
309+
</body>
310+
</html>

0 commit comments

Comments
 (0)