Skip to content

Commit 502f43a

Browse files
MichaIngMichaIng
authored
Further slider enhancements
and documentation. Three breaking changes: - The "page()" function has been removed, which was used by the animation dots only, which call "_navigate()" now directly and hence align much more with the navigation error click functions. This makes the index check obsolete. - The "_navigate()" function now requires the direction, given via second argument. This was optional and calculated within the "page()" function before. Now it is done within the dots click function. This again aligns them better, as the arrow click functions calculate the target page instead. - The "logError()" function has been removed. We use this module in our known environment, where a console is assured to be present, which makes the check for it obsolete.
1 parent 4932cf2 commit 502f43a

1 file changed

Lines changed: 49 additions & 56 deletions

File tree

‎js/jquery.cslider.js‎

Lines changed: 49 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,58 @@
11
// Original: https://github.com/Le-Stagiaire/jquery.cslider/blob/0c99322/src/jquery.cslider.js
2+
'use strict';
23
(function ($) {
3-
// Slider object
44
$.Slider = function (options, element) {
55
this.$el = $(element);
66
this._init(options);
77
};
88
$.Slider.defaults = {
9-
current: 0, // index of current slide
10-
bgincrement: 100, // increment the bg position (parallax effect) when sliding
11-
autoplay: true, // slideshow on / off
12-
interval: 6000 // time between transitions
9+
current: 0, // Initial slide [index]
10+
bgincrement: 100, // Background parallax [pixels], set "0" to disable
11+
autoplay: true, // Slideshow enabled [true|false]
12+
interval: 6000 // Slideshow interval [milliseconds]
1313
};
1414
$.Slider.prototype = {
1515
_init: function (options) {
1616
this.options = $.extend(true, {}, $.Slider.defaults, options);
17+
this.isAnimating = false;
18+
this.bgpositer = 0;
19+
// Detect slides
1720
this.$slides = this.$el.find('div.da-slide');
1821
this.slidesCount = this.$slides.length;
19-
this.current = this.options.current;
20-
if (this.current < 0 || this.current >= this.slidesCount) {
21-
this.current = 0;
22-
}
22+
this.current = (this.options.current >= 0 && this.options.current < this.slidesCount) ? this.options.current : 0;
2323
this.$slides.eq(this.current).addClass('da-slide-current');
24+
// Create navigation dots
2425
var $navigation = $('<nav class="da-dots"/>');
2526
for (var i = 0; i < this.slidesCount; ++i) {
26-
$navigation.append('<span/>');
27+
if (i === this.current) {
28+
$navigation.append('<span class="da-dots-current"/>');
29+
} else {
30+
$navigation.append('<span/>');
31+
}
2732
}
2833
$navigation.appendTo(this.$el);
2934
this.$pages = this.$el.find('nav.da-dots > span');
35+
// Detect navigation arrows
3036
this.$navNext = this.$el.find('span.da-arrows-next');
3137
this.$navPrev = this.$el.find('span.da-arrows-prev');
32-
this.isAnimating = false;
33-
this.bgpositer = 0;
34-
35-
this._updatePage();
36-
// load the events
38+
// Register navigation events
3739
this._loadEvents();
38-
// slideshow
40+
// Start slideshow if enabled
3941
if (this.options.autoplay) {
4042
this._startSlideshow();
4143
}
4244
},
4345
_navigate: function (page, dir) {
44-
var $current = this.$slides.eq(this.current);
4546
if (this.current === page || this.isAnimating) {
4647
return false;
4748
}
4849
this.isAnimating = true;
49-
// check dir
50-
var classTo, classFrom, d;
51-
if (!dir) {
52-
( page > this.current ) ? d = 'next' : d = 'prev';
53-
} else {
54-
d = dir;
55-
}
56-
if (d === 'next') {
50+
var $current = this.$slides.eq(this.current),
51+
$next = this.$slides.eq(page),
52+
rmClasses = 'da-slide-toleft da-slide-toright da-slide-fromleft da-slide-fromright',
53+
classTo, classFrom;
54+
// Direction
55+
if (dir === 'next') {
5756
classTo = 'da-slide-toleft';
5857
classFrom = 'da-slide-fromright';
5958
++this.bgpositer;
@@ -62,26 +61,26 @@
6261
classFrom = 'da-slide-fromleft';
6362
--this.bgpositer;
6463
}
65-
this.$el.css('background-position-x', this.bgpositer * this.options.bgincrement + '%');
66-
this.current = page;
67-
var $next = this.$slides.eq(this.current),
68-
rmClasses = 'da-slide-toleft da-slide-toright da-slide-fromleft da-slide-fromright';
64+
// Start background animation if enabled
65+
if (this.options.bgincrement) {
66+
this.$el.css('background-position-x', this.bgpositer * this.options.bgincrement + '%');
67+
}
68+
// Start slide animation
6969
$current.removeClass(rmClasses);
7070
$next.removeClass(rmClasses);
7171
$current.addClass(classTo);
7272
$next.addClass(classFrom);
7373
$current.removeClass('da-slide-current');
7474
$next.addClass('da-slide-current');
75-
this._updatePage();
76-
},
77-
_updatePage: function () {
75+
// Update navigation dots
7876
this.$pages.removeClass('da-dots-current');
79-
this.$pages.eq(this.current).addClass('da-dots-current');
77+
this.$pages.eq(page).addClass('da-dots-current');
78+
this.current = page;
8079
},
8180
_startSlideshow: function () {
8281
var _self = this;
8382
this.slideshow = setTimeout(function () {
84-
var page = ( _self.current < _self.slidesCount - 1 ) ? page = _self.current + 1 : page = 0;
83+
var page = (_self.current < _self.slidesCount - 1) ? _self.current + 1 : 0;
8584
_self._navigate(page, 'next');
8685
if (_self.options.autoplay) {
8786
_self._startSlideshow();
@@ -94,61 +93,55 @@
9493
this.options.autoplay = false;
9594
}
9695
},
97-
page: function (idx) {
98-
if (idx >= this.slidesCount || idx < 0) {
99-
return false;
100-
}
101-
this._stopSlideshow();
102-
this._navigate(idx);
103-
},
10496
_loadEvents: function () {
10597
var _self = this;
98+
// Click on navigation dots
10699
this.$pages.on('click.cslider', function () {
107-
_self.page($(this).index());
100+
_self._stopSlideshow();
101+
var dir = ($(this).index() > _self.current) ? 'next' : 'prev';
102+
_self._navigate($(this).index(), dir);
108103
return false;
109104
});
105+
// Click on right navigation arrow
110106
this.$navNext.on('click.cslider', function () {
111107
_self._stopSlideshow();
112-
var page = ( _self.current < _self.slidesCount - 1 ) ? page = _self.current + 1 : page = 0;
108+
var page = (_self.current < _self.slidesCount - 1) ? _self.current + 1 : 0;
113109
_self._navigate(page, 'next');
114110
return false;
115111
});
112+
// Click on left navigation arrow
116113
this.$navPrev.on('click.cslider', function () {
117114
_self._stopSlideshow();
118-
var page = ( _self.current > 0 ) ? page = _self.current - 1 : page = _self.slidesCount - 1;
115+
var page = (_self.current > 0) ? _self.current - 1 : _self.slidesCount - 1;
119116
_self._navigate(page, 'prev');
120117
return false;
121118
});
122-
if (!this.options.bgincrement) {
123-
this.$el.on('animationend.cslider', function (event) {
124-
if (_self.isAnimating && (event.originalEvent.animationName === 'fromRight' || event.originalEvent.animationName === 'fromLeft')) {
119+
// Flag to disable navigation during animation
120+
if (this.options.bgincrement) {
121+
this.$el.on('transitionend.cslider', function (event) {
122+
if (_self.isAnimating && (event.target === event.currentTarget)) {
125123
_self.isAnimating = false;
126124
}
127125
});
128126
} else {
129-
this.$el.on('transitionend.cslider', function (event) {
130-
if (_self.isAnimating && (event.target.id === _self.$el.attr('id'))) {
127+
this.$el.on('animationend.cslider', function (event) {
128+
if (_self.isAnimating && (event.originalEvent.animationName === 'fromRight' || event.originalEvent.animationName === 'fromLeft')) {
131129
_self.isAnimating = false;
132130
}
133131
});
134132
}
135133
}
136134
};
137-
var logError = function (message) {
138-
if (this.console) {
139-
console.error(message);
140-
}
141-
};
142135
$.fn.cslider = function (options) {
143136
if (typeof options === 'string') {
144137
var args = Array.prototype.slice.call(arguments, 1);
145138
this.each(function () {
146139
var instance = $.data(this, 'cslider');
147140
if (!instance) {
148-
logError("cannot call methods on cslider prior to initialization; " +
141+
console.error("cannot call methods on cslider prior to initialization; " +
149142
"attempted to call method '" + options + "'");
150143
} else if (!$.isFunction(instance[options]) || options.charAt(0) === "_") {
151-
logError("no such method '" + options + "' for cslider instance");
144+
console.error("no such method '" + options + "' for cslider instance");
152145
} else {
153146
instance[options].apply(instance, args);
154147
}

0 commit comments

Comments
 (0)