10000 wtf was I doing with fade · Dream-git/unslider@93b8fc0 · GitHub
[go: up one dir, main page]
Skip to content

Commit 93b8fc0

Browse files
author
Visual Idiot
committed
wtf was I doing with fade
1 parent d419df2 commit 93b8fc0

File tree

11 files changed

+37
-121
lines changed

11 files changed

+37
-121
lines changed

‎.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
*.esproj
2-
.DS_Store
2+
.DS_Store
3+
.codekit-cache

‎config.codekit

Lines changed: 0 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -54,26 +54,6 @@
5454
"randomFootnoteNumbers": 0,
5555
"useCompatibilityMode": 0
5656
},
57-
"\/src\/css\/unslider-dots.less": {
58-
"allowInsecureImports": 0,
59-
"createSourceMap": 0,
60-
"disableJavascript": 0,
61-
"fileType": 1,
62-
"ieCompatibility": 1,
63-
"ignore": 0,
64-
"ignoreWasSetByUser": 0,
65-
"inputAbbreviatedPath": "\/src\/css\/unslider-dots.less",
66-
"outputAbbreviatedPath": "\/src\/css\/unslider-dots.css",
67-
"outputPathIsOutsideProject": 0,
68-
"outputPathIsSetByUser": 0,
69-
"outputStyle": 0,
70-
"relativeURLS": 0,
71-
"shouldRunAutoprefixer": 0,
72-
"shouldRunBless": 0,
73-
"strictImports": 0,
74-
"strictMath": 0,
75-
"strictUnits": 0
76-
},
7757
"\/src\/css\/unslider.less": {
7858
"allowInsecureImports": 0,
7959
"createSourceMap": 0,
@@ -134,26 +114,6 @@
134114
"strictMath": 0,
135115
"strictUnits": 0
136116
},
137-
"\/src\/css\/unslider\/transition-height.less": {
138-
"allowInsecureImports": 0,
139-
"createSourceMap": 0,
140-
"disableJavascript": 0,
141-
"fileType": 1,
142-
"ieCompatibility": 1,
143-
"ignore": 1,
144-
"ignoreWasSetByUser": 0,
145-
"inputAbbreviatedPath": "\/src\/css\/unslider\/transition-height.less",
146-
"outputAbbreviatedPath": "\/src\/css\/css\/transition-height.css",
147-
"outputPathIsOutsideProject": 0,
148-
"outputPathIsSetByUser": 0,
149-
"outputStyle": 0,
150-
"relativeURLS": 0,
151-
"shouldRunAutoprefixer": 0,
152-
"shouldRunBless": 0,
153-
"strictImports": 0,
154-
"strictMath": 0,
155-
"strictUnits": 0
156-
},
157117
"\/src\/css\/variables.less": {
158118
"allowInsecureImports": 0,
159119
"createSourceMap": 0,

‎dist/css/unslider.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/unslider-min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎readme.md

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,4 @@ Unslider
44
The easiest way to get a simple slider up and running in seconds. All you need
55
is some valid markup, jQuery and some extra CSS, and Unslider can do the rest.
66

7-
### Out-of-the-box features
8-
9-
- Slides things (obviously)
10-
- Left/right arrow keyboard navigation
11-
- Auto-generated slide navigation
12-
- Clickable arrows
13-
- Touch support
14-
15-
### Unslider extensions
16-
17-
- Infinite scroll (instead of looping back to the start)
18-
- Fade effect (instead of sliding things)
19-
- Much more...
20-
21-
## Setting things up
7+
Check the docs out: http://unslider.com

‎src/css/unslider-dots.less

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎src/css/unslider.less

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,13 @@
66
@import 'variables';
77
@import 'unslider/reset';
88

9-
// Unfortunately, LESS isn't great at conditionals
10-
.transition-height() when (@unslider-transition-height = true) { @import 'unslider/transition-height'; }
11-
.transition-height();
12-
139
// Unfortunately, LESS isn't great at conditionals
1410
.use-dots() when (@unslider-dot-navigation = true) { @import 'unslider/dots'; }
15-
.use-dots();
11+
.use-dots();
12+
13+
// You can also import dots directly yourself to use
14+
// in a more specific selector, like so:
15+
// #demo {
16+
// .use-dots() when (@unslider-dot-navigation = true) { @import 'unslider/dots'; }
17+
// .use-dots();
18+
// }

‎src/css/unslider/reset.less

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -14,30 +14,18 @@
1414
}
1515

1616
&-fade {
17+
position: relative;
18+
1719
.unslider-wrap li {
1820
position: absolute;
1921
left: 0;
2022
top: 0;
2123
right: 0;
2224
z-index: 8;
2325

24-
opacity: 0;
25-
26-
-webkit-transition: opacity @unslider-transition-speed @unslider-transition-function;
27-
-ms-transition: opacity @unslider-transition-speed @unslider-transition-function;
28-
transition: opacity @unslider-transition-speed @unslider-transition-function;
29-
30-
&.unslider-active, &.unslider-last-active {
31-
opacity: 1;
32-
}
33-
3426
&.unslider-active {
3527
z-index: 10;
3628
}
37-
38-
&.unslider-last-active {
39-
z-index: 9;
40-
}
4129
}
4230
}
4331

‎src/css/unslider/transition-height.less

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎src/css/variables.less

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,6 @@
77
* hardware-accelerated goodness.
88
*/
99

10-
// How fast you'd like the slides to move between each other
11-
@unslider-transition-speed: .65s;
12-
13-
// Unslider 2 has navigation styles pre-designed. You can turn it off here.
14-
@unslider-transition-height: true;
15-
1610
// Unslider 2 has navigation styles pre-designed. You can turn it off here.
1711
@unslider-dot-navigation: false;
1812
@unslider-dot-colour: #fff;

‎src/js/unslider.js

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -83,8 +83,7 @@
8383
animateHeight: false,
8484

8585
// Active class for the nav
86-
activeClass: self._ + '-active',
87-
lastActiveClass: self._ + '-last-active'
86+
activeClass: self._ + '-active'
8887
};
8988

9089
// Set defaults
@@ -146,7 +145,7 @@
146145
self.$context.trigger(self._ + '.ready');
147146

148147
// Everyday I'm chainin'
149-
return self.animate(self.options.index || self.current);
148+
return self.animate(self.options.index || self.current, 'init');
150149
};
151150

152151
self.setup = function() {
@@ -189,12 +188,16 @@
189188
// And restart our timeout
190189
self.start();
191190
}, self.options.delay);
191+
192+
return self;
192193
};
193194

194195
// And pause our timeouts
195196
// and force stop the slider if needed
196197
self.stop = function() {
197198
clearTimeout(self.interval);
199+
200+
return self;
198201
};
199202

200203

@@ -229,6 +232,9 @@
229232
// Set the right active class, remove any other ones
230233
$me.siblings().removeClass(self.options.activeClass);
231234

235+
// Stop the jerky stop-start
236+
self.stop().start();
237+
232238
// Move the slide
233239
self.animate($me.attr('data-slide'));
234240
});
@@ -437,9 +443,7 @@
437443
// horizontal animation
438444
self.animateHorizontal = function(to) {
439445
if(self.options.animateHeight) {
440-
var height = self.$slides.eq(to).height();
441-
442-
self.$context.css('height', height);
446+
self.$context.move({height: self.$slides.eq(to).height()});
443447
}
444448

445449
if(self.options.infinite) {
@@ -476,28 +480,27 @@
476480
}
477481
}
478482

479-
return self.$container._move({left: -(100 * to) + '%'}, self.options.speed, self.options.easing, function() {
480-
self.$context.trigger(self._ + '.moved');
481-
});
483+
return self._move(self.$container, {left: -(100 * to) + '%'});
482484
};
483485

484486

485487
// Fade between slides rather than, uh, sliding it
486488
self.animateFade = function(to, dir) {
487-
var $active = self.$slides.removeClass(self.options.lastActiveClass).eq(to);
488-
var $prev = $active.prev();
489+
var $active = self.$slides.eq(to).addClass(self.options.activeClass);
CFBB 489490

490-
if(!$prev.length) {
491-
$prev = self.$slides.last();
492-
}
491+
// Toggle our classes
492+
self._move($active.siblings().removeClass(self.options.activeClass), {opacity: 0});
493+
self._move($active, {opacity: 1}, false);
494+
};
493495

494-
if(dir === 'prev') {
495-
// @TODO: fix fading backwards
496+
self._move = function($el, obj, callback) {
497+
if(callback !== false) {
498+
callback = function() {
499+
self.$context.trigger(self._ + '.moved');
500+
};
496501
}
497502

498-
// Toggle our classes
499-
$prev.addClass(self.options.lastActiveClass).removeClass(self.options.activeClass);
500-
$active.removeClass(self.options.lastActiveClass).addClass(self.options.activeClass);
503+
return $el._move(obj, self.options.speed, self.options.easing, callback);
501504
};
502505

503506
// Allow daisy-chaining of methods

0 commit comments

Comments
 (0)
0