Permalink
Browse files

Fixes & Enhancements

- Added custom paging templates
- Stripped ID’s from clones
- Added component
- Made transitions cleaner
  • Loading branch information...
1 parent 496311a commit 7c5665fa4186406c1b3232f6a7ca28886428fa10 @kenwheeler committed Apr 10, 2014
Showing with 85 additions and 484 deletions.
  1. +8 −0 Makefile
  2. +1 −0 README.markdown
  3. +17 −0 component.json
  4. +6 −0 index.html
  5. +7 −7 slick/slick.css
  6. +34 −38 slick/slick.js
  7. +1 −437 slick/slick.min.js
  8. +11 −2 slick/slick.scss
View
@@ -0,0 +1,8 @@
+
+build: components slick.js slick.css
+ @component build --dev
+
+components: component.json
+ @component install --dev
+
+.PHONY: clean
View
@@ -20,6 +20,7 @@ autoplaySpeed | int | 3000 | Auto play change interval
centerMode | boolean | false | Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts.
centerPadding | string | '50px' | Side padding when in center mode. (px or %)
cssEase | string | 'ease' | CSS3 easing
+customPaging | function | n/a | Custom paging templates. See source for use example.
dots | boolean | false | Current slide indicator dots
draggable | boolean | true | Enables desktop dragging
easing | string | 'linear' | animate() fallback easing
View
@@ -0,0 +1,17 @@
+{
+ "name": "slick",
+ "repo": "kenwheeler/slick",
+ "description": "the last carousel you'll ever need",
+ "version": "1.3.4",
+ "keywords": ["ui", "jquery", "carousel", "responsive", "slider"],
+ "dependencies": {
+ "component/jquery": "*"
+ },
+ "development": {},
+ "scripts": {
+ "slick/slick.js": "slick.js"
+ },
+ "styles": {
+ "slick/slick.css": "slick.css"
+ }
+}
View
@@ -454,6 +454,12 @@ <h2 >Settings</h2>
<td>CSS3 Animation Easing</td>
</tr>
<tr>
+ <td>customPaging</td>
+ <td>function</td>
+ <td>n/a</td>
+ <td>Custom paging templates. See source for use example.</td>
+ </tr>
+ <tr>
<td>dots</td>
<td>boolean</td>
<td>false</td>
View
@@ -1,5 +1,5 @@
/* Slider */
-.slick-slider { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: none; touch-action: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
+.slick-slider { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: none; touch-action: none; -webkit-tap-highlight-color: transparent; }
.slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; }
.slick-list:focus { outline: none; }
@@ -23,9 +23,8 @@
/* Icons */
@font-face { font-family: "slick"; src: url("./fonts/slick.eot"); src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg"); font-weight: normal; font-style: normal; }
-
/* Arrows */
-.slick-prev, .slick-next { position: absolute; display: block; height: 20px; width: 20px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; top: 50%; margin-top: -10px; padding: 0; border: none; }
+.slick-prev, .slick-next { position: absolute; display: block; height: 20px; width: 20px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; top: 50%; margin-top: -10px; padding: 0; border: none; outline: none; }
.slick-prev:focus, .slick-next:focus { outline: none; }
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; }
@@ -41,7 +40,8 @@
.slick-slider { margin-bottom: 30px; }
.slick-dots { position: absolute; bottom: -45px; list-style: none; display: block; text-align: center; padding: 0px; width: 100%; }
-.slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0px 5px; padding: 0px; }
-.slick-dots li a { display: block; height: 20px; width: 20px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; }
-.slick-dots li a:before { position: absolute; top: 0; left: 0; content: '\8226'; width: 20px; height: 20px; font-family: "slick"; font-size: 6px; line-height: 20px; text-align: center; color: black; opacity: 0.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
-.slick-dots li.slick-active a:before { opacity: 0.75; }
+.slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0px 5px; padding: 0px; cursor: pointer; }
+.slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer; outline: none; }
+.slick-dots li button:focus { outline: none; }
+.slick-dots li button:before { position: absolute; top: 0; left: 0; content: '\8226'; width: 20px; height: 20px; font-family: "slick"; font-size: 6px; line-height: 20px; text-align: center; color: black; opacity: 0.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+.slick-dots li.slick-active button:before { opacity: 0.75; }
View
@@ -45,6 +45,9 @@
centerMode: false,
centerPadding: '50px',
cssEase: 'ease',
+ customPaging: function(slider, i) {
+ return '<button type="button">' + (i + 1) + '</button>';
+ },
dots: false,
draggable: true,
easing: 'linear',
@@ -103,6 +106,7 @@
_.positionProp = null;
_.$slider = $(element);
_.$slidesCache = null;
+ _.transformType = null;
_.transitionType = null;
_.windowWidth = 0;
_.windowTimer = null;
@@ -259,29 +263,18 @@
Slick.prototype.applyTransition = function(slide) {
var _ = this,
- transition, origin;
+ transition = {};
if (_.options.fade === false) {
- transition = _.transitionType + ' ' + _.options.speed + 'ms ' + _.options.cssEase;
+ transition[_.transitionType] = _.transformType + ' ' + _.options.speed + 'ms ' + _.options.cssEase;
} else {
- transition = 'opacity ' + _.options.speed + 'ms ' + _.options.cssEase;
- }
-
- if (_.options.vertical === false) {
- origin = (_.listWidth / 2) + ' 50%';
- } else {
- origin = '';
+ transition[_.transitionType] = 'opacity ' + _.options.speed + 'ms ' + _.options.cssEase;
}
if (_.options.fade === false) {
- _.$slideTrack.css({
- transition: transition,
- transformOrigin: origin
- });
+ _.$slideTrack.css(transition);
} else {
- _.$slides.eq(slide).css({
- transition: transition
- });
+ _.$slides.eq(slide).css(transition);
}
};
@@ -355,10 +348,10 @@
if (_.options.arrows === true && _.slideCount > _.options.slidesToShow) {
_.$prevArrow = $(
- '<button type="button" class="slick-prev" tabIndex="-1">Previous</button>').appendTo(
+ '<button type="button" class="slick-prev">Previous</button>').appendTo(
_.$slider);
_.$nextArrow = $(
- '<button type="button" class="slick-next" tabIndex="-1">Next</button>').appendTo(
+ '<button type="button" class="slick-next">Next</button>').appendTo(
_.$slider);
if (_.options.infinite !== true) {
@@ -379,8 +372,7 @@
dotString = '<ul class="slick-dots">';
for (i = 0; i <= _.getDotCount(); i += 1) {
- dotString += '<li><a href="javascript:void(0)" tabIndex="-1">' + i +
- '</a></li>';
+ dotString += '<li>' + _.options.customPaging.call(this, _, i) + '</li>';
}
dotString += '</ul>';
@@ -415,10 +407,6 @@
'<div class="slick-list"/>').parent();
_.$slideTrack.css('opacity', 0);
- if (_.options.accessibility === true) {
- _.$list.prop('tabIndex', 0);
- }
-
if (_.options.centerMode === true) {
_.options.infinite = true;
_.options.slidesToScroll = 1;
@@ -435,6 +423,10 @@
_.buildDots();
+ if (_.options.accessibility === true) {
+ _.$list.prop('tabIndex', 0);
+ }
+
_.setSlideClasses(0);
if (_.options.draggable === true) {
@@ -547,17 +539,15 @@
Slick.prototype.disableTransition = function(slide) {
- var _ = this;
+ var _ = this,
+ transition = {};
+
+ transition[_.transitionType] = "";
if (_.options.fade === false) {
- _.$slideTrack.css({
- transition: '',
- transformOrigin: ''
- });
+ _.$slideTrack.css(transition);
} else {
- _.$slides.eq(slide).css({
- transition: ''
- });
+ _.$slides.eq(slide).css(transition);
}
};
@@ -720,7 +710,7 @@
var _ = this;
if (_.options.dots === true && _.slideCount > _.options.slidesToShow) {
- $('li a', _.$dots).on('click.slick', {
+ $('li', _.$dots).on('click.slick', {
message: 'index'
}, _.changeSlide);
}
@@ -1135,15 +1125,18 @@
if (document.body.style.MozTransform !== undefined) {
_.animType = 'MozTransform';
- _.transitionType = '-moz-transform';
+ _.transformType = "-moz-transform";
+ _.transitionType = 'MozTransition';
}
if (document.body.style.webkitTransform !== undefined) {
_.animType = 'webkitTransform';
- _.transitionType = '-webkit-transform';
+ _.transformType = "-webkit-transform";
+ _.transitionType = 'webkitTransition';
}
if (document.body.style.msTransform !== undefined) {
_.animType = 'msTransform';
- _.transitionType = '-ms-transform';
+ _.transformType = "-ms-transform";
+ _.transitionType = 'mstransition';
}
_.transformsEnabled = (_.animType !== null);
@@ -1231,14 +1224,17 @@
for (i = _.slideCount; i > (_.slideCount -
infiniteCount); i -= 1) {
slideIndex = i - 1;
- $(_.$slides[slideIndex]).clone().prependTo(
+ $(_.$slides[slideIndex]).clone().attr('id', '').prependTo(
_.$slideTrack).addClass('slick-cloned');
}
for (i = 0; i < infiniteCount; i += 1) {
slideIndex = i;
- $(_.$slides[slideIndex]).clone().appendTo(
+ $(_.$slides[slideIndex]).clone().attr('id', '').appendTo(
_.$slideTrack).addClass('slick-cloned');
}
+ _.$slideTrack.find('.slick-cloned').find('[id]').each(function() {
+ $(this).attr('id', '');
+ });
}
Oops, something went wrong.

3 comments on commit 7c5665f

@wilirius
Contributor

ken vs nate, transparent vs rgba(0,0,0,0), round 3.

This is completely pointless but I keep seeing it and it feels like a funny little duel to me.

slick/slick.scss line 16
slick/slick.css line 2

Ken your preprocessor is translating

rgba(0,0,0,0)

into

transparent

while Nate, yours keeps the rgba version.

@kenwheeler
Owner

lol I'm on the latest SASS, wonder if it's getting interpreted differently per version.

@natewiley
Contributor

I noticed this too lol. Mine kept adding that blank line on 26 too. I'll check my version

Please sign in to comment.