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

Commit 507210b

Browse files
jeffikusjeffikus
committed
Closes #1143 - adds customDirectionNav param, fixes demo's and adds new demo for custom direction navigation controls. Updates changelog and readme.
1 parent 29d7078 commit 507210b

13 files changed

+212
-7
lines changed

‎README.mdown‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ To keep up to date with how FlexSlider's development roadmap looks, please see o
2121

2222
** Version 2.5.0 **
2323

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

2626
** Version 2.4.0 **
2727

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

7575
- [Basic Slider](http://flexslider.woothemes.com/)
76+
- [Basic Slider customDirectionNav](http://flexslider.woothemes.com/basic-slider-with-custom-direction-nav.html)
7677
- [Slider w/thumbnail controlNav pattern](http://flexslider.woothemes.com/thumbnail-controlnav.html)
7778
- [Slider w/thumbnail slider](http://flexslider.woothemes.com/thumbnail-slider.html)
7879
- [Basic Carousel](http://flexslider.woothemes.com/basic-carousel.html)
@@ -141,6 +142,11 @@ Previously called "keyboardNav" in v1.8 and below.
141142
### controlsContainer: *{updated}*
142143
`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.
143144

145+
### customDirectionNav: *{new}*
146+
`customDirectionNav` allows the ability to add custom directional navigation elements. Can be used in conjunction with controlsContainer for pagination controls container.
147+
148+
*[Example of customDirectionNav being used](http://flexslider.woothemes.com/basic-slider-with-custom-direction-nav.html)*
149+
144150
### sync: *{new}*
145151
`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.
146152

‎changelog.txt‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,5 @@ FLEXSLIDER CHANGELOG
1515
2015.05.19 - Version 2.5.0
1616
* CSS fix for pausePlay play icon.
1717
* Firefox touchstart event fix.
18-
* Compatibility change for jQuery to 1.7.0+
18+
* Compatibility change for jQuery to 1.7.0+
19+
* Adds customDirectionNav param for custom navigation controls

‎demo/basic-carousel.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ <h3 class="header-nav">Other Examples</h3>
2727
<nav>
2828
<ul>
2929
<li><a href="index.html">Basic Slider</a></li>
30+
<li><a href="basic-slider-with-custom-direction-nav.html">Basic Slider customDirectionNav</a></li>
3031
<li><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
3132
<li><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
3233
<li class="active"><a href="basic-carousel.html">Basic Carousel</a></li>

‎demo/basic-slider-with-custom-direction-nav.html‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
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+
<!-- Demo CSS -->
9+
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
10+
<link rel="stylesheet" href="../flexslider.css" type="text/css" media="screen" />
11+
12+
<!-- Modernizr -->
13+
<script src="js/modernizr.js"></script>
14+
15+
<style>
16+
.flexslider {
17+
margin-bottom: 10px;
18+
}
19+
20+
.flex-control-nav {
21+
position: relative;
22+
bottom: auto;
23+
}
24+
25+
.custom-navigation {
26+
display: table;
27+
width: 100%;
28+
table-layout: fixed;
29+
}
30+
31+
.custom-navigation > * {
32+
display: table-cell;
33+
}
34+
35+
.custom-navigation > a {
36+
width: 50px;
37+
}
38+
39+
.custom-navigation .flex-next {
40+
text-align: right;
41+
}
42+
</style>
43+
44+
</head>
45+
<body class="loading">
46+
47+
<div id="container" class="cf">
48+
<header role="navigation">
49+
<a class="logo" href="http://www.woothemes.com" title="WooThemes">
50+
<img src="images/logo.png" alt="WooThemes" />
51+
</a>
52+
<h1>FlexSlider 2</h1>
53+
<h2>The best responsive slider. Period.</h2>
54+
<a class="button green" href="https://github.com/woothemes/FlexSlider/zipball/master">Download Flexslider</a>
55+
<h3 class="nav-header">Other Examples</h3>
56+
<nav>
57+
<ul>
58+
<li><a href="index.html">Basic Slider</a></li>
59+
<li class="active"><a href="basic-slider-with-custom-direction-nav.html">Basic Slider customDirectionNav</a></li>
60+
<li><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
61+
<li><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
62+
<li><a href="basic-carousel.html">Basic Carousel</a></li>
63+
<li><a href="carousel-min-max.html">Carousel with min and max ranges</a></li>
64+
<li><a href="dynamic-carousel-min-max.html">Carousel with dynamic min/max ranges</a></li>
65+
<li><a href="video.html">Video & the api (vimeo)</a></li>
66+
<li><a href="video-wistia.html">Video & the api (wistia)</a></li>
67+
</ul>
68+
</nav>
69+
</header>
70+
71+
<div id="main" role="main">
72+
73+
<section class="slider">
74+
<div class="flexslider">
75+
<ul class="slides">
76+
<li>
77+
<img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
78+
</li>
79+
<li>
80+
<img src="images/kitchen_adventurer_lemon.jpg" />
81+
</li>
82+
<li>
83+
<img src="images/kitchen_adventurer_donut.jpg" />
84+
</li>
85+
<li>
86+
<img src="images/kitchen_adventurer_caramel.jpg" />
87+
</li>
88+
</ul>
89+
</div>
90+
<div class="custom-navigation">
91+
<a href="#" class="flex-prev">Prev</a>
92+
<div class="custom-controls-container"></div>
93+
<a href="#" class="flex-next">Next</a>
94+
</div>
95+
</section>
96+
97+
<aside>
98+
<div class="cf">
99+
<h3>Basic Slider</h3>
100+
<ul class="toggle cf">
101+
<li class="js"><a href="#view-js">JS</a></li>
102+
<li class="html"><a href="#view-html">HTML</a></li>
103+
</ul>
104+
</div>
105+
<div id="view-js" class="code">
106+
<pre class="brush: js; toolbar: false; gutter: false;">
107+
// Can also be used with $(document).ready()
108+
$(window).load(function() {
109+
$('.flexslider').flexslider({
110+
animation: "slide",
111+
controlsContainer: $(".custom-controls-container"),
112+
customDirectionNav: $(".custom-navigation a")
113+
});
114+
});
115+
</pre>
116+
</div>
117+
<div id="view-html" class="code">
118+
<pre class="brush: xml; toolbar: false; gutter: false;">
119+
&lt;!-- Place somewhere in the &lt;body&gt; of your page -->
120+
&lt;div class="flexslider">
121+
&lt;ul class="slides">
122+
&lt;li>
123+
&lt;img src="slide1.jpg" />
124+
&lt;/li>
125+
&lt;li>
126+
&lt;img src="slide2.jpg" />
127+
&lt;/li>
128+
&lt;li>
129+
&lt;img src="slide3.jpg" />
130+
&lt;/li>
131+
&lt;li>
132+
&lt;img src="slide4.jpg" />
133+
&lt;/li>
134+
&lt;/ul>
135+
&lt;/div>
136+
&lt;div class="custom-navigation">
137+
&lt;a href="#" class="flex-prev">Prev&lt;/a>
138+
&lt;div class="custom-controls-container">&lt;/div>
139+
&lt;a href="#" class="flex-next">Next&lt;/a>
140+
&lt;/div>
141+
</pre>
142+
</div>
143+
</aside>
144+
</div>
145+
146+
</div>
147+
148+
<!-- jQuery -->
149+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
150+
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>
151+
152+
<!-- FlexSlider -->
153+
<script defer src="../jquery.flexslider.js"></script>
154+
155+
<script type="text/javascript">
156+
$(function(){
157+
SyntaxHighlighter.all();
158+
});
159+
$(window).load(function(){
160+
$('.flexslider').flexslider({
161+
animation: "slide",
162+
controlsContainer: $(".custom-controls-container"),
163+
customDirectionNav: $(".custom-navigation a"),
164+
start: function(slider){
165+
$('body').removeClass('loading');
166+
}
167+
});
168+
});
169+
</script>
170+
171+
172+
<!-- Syntax Highlighter -->
173+
<script type="text/javascript" src="js/shCore.js"></script>
174+
<script type="text/javascript" src="js/shBrushXml.js"></script>
175+
<script type="text/javascript" src="js/shBrushJScript.js"></script>
176+
177+
<!-- Optional FlexSlider Additions -->
178+
<script src="js/jquery.easing.js"></script>
179+
<script src="js/jquery.mousewheel.js"></script>
180+
<script defer src="js/demo.js"></script>
181+
182+
</body>
183+
</html>

‎demo/carousel-min-max.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ <h3 class="nav-header">Other Examples</h3>
3030
<nav>
3131
<ul>
3232
<li><a href="index.html">Basic Slider</a></li>
33+
<li><a href="basic-slider-with-custom-direction-nav.html">Basic Slider customDirectionNav</a></li>
3334
<li><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
3435
<li><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
3536
<li><a href="basic-carousel.html">Basic Carousel</a></li>

‎demo/dynamic-carousel-min-max.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@ <h2>The best responsive slider. Period.</h2>
2626
<h3 class="header-nav">Other Examples</h3>
2727
<nav>
2828
<ul>
29-
<li><a href="demo">Basic Slider</a></li>
29+
<li><a href="index.html">Basic Slider</a></li>
30+
<li><a href="basic-slider-with-custom-direction-nav.html">Basic Slider customDirectionNav</a></li>
3031
<li><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
3132
<li><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
3233
<li><a href="basic-carousel.html">Basic Carousel</a></li>

‎demo/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@ <h2>The best responsive slider. Period.</h2>
2626
<h3 class="nav-header">Other Examples</h3>
2727
<nav>
2828
<ul>
29-
<li class="active"><a href="demo">Basic Slider</a></li>
29+
<li class="active"><a href="index.html">Basic Slider</a></li>
30+
<li><a href="basic-slider-with-custom-direction-nav.html">Basic Slider customDirectionNav</a></li>
3031
<li><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
3132
<li><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
3233
<li><a href="basic-carousel.html">Basic Carousel</a></li>

‎demo/thumbnail-controlnav.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ <h3 class="nav-header">Other Examples</h3>
2727
<nav>
2828
<ul>
2929
<li><a href="index.html">Basic Slider</a></li>
30+
<li><a href="basic-slider-with-custom-direction-nav.html">Basic Slider customDirectionNav</a></li>
3031
<li class="active"><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
3132
<li><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
3233
<li><a href="basic-carousel.html">Basic Carousel</a></li>

‎demo/thumbnail-slider.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ <h3 class="nav-header">Other Examples</h3>
2727
<nav>
2828
<ul>
2929
<li><a href="index.html">Basic Slider</a></li>
30+
<li><a href="basic-slider-with-custom-direction-nav.html">Basic Slider customDirectionNav</a></li>
3031
<li><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
3132
<li class="active"><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
3233
<li><a href="basic-carousel.html">Basic Carousel</a></li>

‎demo/video-wistia.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ <h3 class="nav-header">Other Examples</h3>
3434
<nav>
3535
<ul>
3636
<li><a href="index.html">Basic Slider</a></li>
37+
<li><a href="basic-slider-with-custom-direction-nav.html">Basic Slider customDirectionNav</a></li>
3738
<li><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
3839
<li><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
3940
<li><a href="basic-carousel.html">Basic Carousel</a></li>

0 commit comments

Comments
 (0)